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WHAT'S ON THE DISC 


Here is an overview of the contents of the Classroom in a Book disc 


The Adobe Flash Professional CSS Classroom in a Book disc includes the lesson files 
that you'll need to complete the exercises in this book, as well as other content to 
help you learn more about Adobe Flash Professional CS5 and use it with greater 
efficiency and ease. The diagram below represents the contents of the disc, which 
should help you locate the files you need. 
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Learn by Video 
bonus tutorials 


A bonus 2-hour set of Learn Photoshop 
CS5 by Video tutorials are included on this 
disc, from video2brain and Adobe Press. 
Learn by Video is one of the most critically 
acclaimed training products on Adobe 
software and is the only Adobe-approved 
video courseware for the Adobe Certified 
Associate Level certification. 


Lesson files 


Each lesson has its own 
folder inside the Lessons 
folder. You will need to 
copy these lesson folders to 
your hard drive before you 
can begin each lesson. 
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Online resources 


Links to Adobe Community 
Help, product Help and 
Support pages, Adobe 

Press, Adobe certification 
programs, Adobe TV, and 
other useful online resources 
can be found inside a handy 
HTML file. Just open it in 
your Web browser and click 
on the links, including a 
special link to this book's 
product page where you can 
access updates and bonus 
material. 
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GETTING STARTED 


Adobe Flash Professional CS5 provides a comprehensive authoring environ- 
ment for creating digital animation and interactive Web sites. Flash is widely 
used to create engaging applications rich in video, sound, graphics, and anima- 
tion. You can create content in Flash or import it from other Adobe applica- 
tions such as Photoshop or Illustrator, quickly design simple animations, and 
use Adobe ActionScript 3.0 to develop sophisticated interactive projects. 


But Adobe Flash Professional is just one product among a suite of Flash CS5 
tools. In addition to Flash Professional, Adobe offers Flash Catalyst and Flash 
Builder. Flash Catalyst is a design tool for rapidly creating expressive interfaces 
and interactive content without writing code. Flash Builder, formerly known 
as Flex Builder, is a code-centric environment geared toward developers rather 
than animators or designers to create interactive content. Although the devel- 
opment platforms are different, all three tools ultimately generate the same 
end product—Flash content (a SWF file). A Flash SWF file runs in the Flash 
Player on your browser, in AIR (Adobe Integrated Runtime) on your desktop 
outside of your browser, or on your mobile phone. 


About Classroom in a Book 


Adobe Flash Professional CS5 Classroom in a Book is part of the official train- 
ing series for Adobe graphics and publishing software developed with the 
support of Adobe product experts. The lessons are designed so you can learn 
at your own pace. If you’re new to Flash, you'll learn the fundamental concepts 
and features you'll need to use the program. Classroom in a Book also teaches 
many advanced features, including tips and techniques for using the latest ver- 
sion of this application. 


What’s New 


The lessons in this book provide opportunities to use some of the new features 
and improvements in Flash Professional CS5, including: 


e ‘The Deco tool, with expanded expressive options to help you create 
complex patterns and decorations easily and automatically. 
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e The Text tool, which has been completely overhauled to support more 
sophisticated layouts such as multiple columns and wrap-around text. 


e Spring, a physics simulation option for animating with inverse kinematics. 


e Code Snippets, a new panel that provides ready-to-go ActionScript code for 
your projects and a way to save and share your code with others. 


e Live video preview for externally loaded video. 


e The new XFL file format, which exposes the Flash file assets and makes it easier 
for a team of developers to work on a single file. 


Prerequisites 


Before you begin using Adobe Flash Professional CSS Classroom in a Book, make 
sure your system is set up correctly and you've installed the required software. You 
should have a working knowledge of your computer and operating system. You 
should know how to use the mouse and standard menus and commands, and also 
how to open, save, and close files. If you need to review these techniques, see the 
printed or online documentation included with your Microsoft Windows or Apple 
Mac OS software. 


Installing Flash 


You must purchase the Adobe Flash Professional CS5 software either as a stand- 
alone application or as part of the Adobe Creative Suite. The following specifica- 
tions are the minimum required system configurations. 


Windows 
e Intel Pentium 4 or AMD Athlon 64 processor 


e Microsoft Windows XP with Service Pack 2 (Service Pack 3 recommended); 
Windows Vista Home Premium, Business, Ultimate, or Enterprise with Service 
Pack 1; or Windows 7 


e 1GBofRAM 


e 3.5 GB of available hard-drive space for installation; additional free space 
required during installation (cannot install on removable flash-based storage 
devices) 


e 1024 x 768 display (1280 x 800 recommended) with 16-bit video card 
e DVD-ROM drive 


e QuickTime 7.6.2 software required for multimedia features 


Mac OS 


Multicore Intel processor 
Mac OS X v10.5.7 or v10.6 
1 GB of RAM 


4 GB of available hard-drive space for installation; additional free space required 


during installation (cannot install on a volume that uses a case-sensitive file 


system or on removable flash-based storage devices) 


1024 x 768 display (1280 x 800 recommended) with 16-bit video card 


DVD-ROM drive 


QuickTime 7.6.2 software required for multimedia features 


For updates on system requirements and complete instructions on installing the 


software, visit www.adobe.com/go/flash_systemreqs. 


Install Flash from the Adobe Flash Professional CS5 application DVD onto your 
hard drive; you cannot run the program from the DVD. Follow the onscreen 


instructions. 


Make sure that your serial number is accessible before installing the application. You 


can find the serial number on the registration card or on the back of the DVD case. 


Copying the Lesson Files 


The lessons in Adobe Flash Professional CS5 Classroom in a Book use specific 


source files, such as image files created in Adobe Illustrator, video files created in 


Adobe After Effects, audio files, and prepared Flash documents. To complete the 


lessons in this book, you must copy these files from the Adobe Flash Professional 


CSS Classroom in a Book CD (inside the back cover of this book) to your hard 


drive. Follow these steps to copy the lesson files: 


1 On your hard drive, create a new folder in a convenient location and name it 


FlashProCS5_CIB, following the standard procedure for your operating system: 


e Windows: In Explorer, select the folder or drive in which you want to create 


the new folder and choose File > New > Folder. Then type the new name. 


e Mac OS: In the Finder, choose File > New Folder. Type the new name and 


drag the folder to the location you want to use. 


Now, you can copy the source files onto your hard drive. 


2 Drag the Lessons folder (which contains folders named Lesson01, Lesson02, 
and so on) from the Adobe Flash Professional CSS Classroom in a Book CD onto 


your hard drive to your new FlashProCS5_CIB folder. 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 


® Note: Many 
aspects of the Flash 
application can be 
controlled by multiple 
techniques, such as 

a menu command, a 
button, dragging, and 
a keyboard shortcut. 
Only one or two of the 
methods are described 
in any given procedure 
so that you can learn 
different ways of 
working, even when the 
task is one you've done 
before. 


4 GETTING STARTED 


When you begin each lesson, navigate to the folder with that lesson number to 
access all the assets, sample movies, and other project files you need to complete 
the lesson. 


If you have limited storage space on your computer, you can copy each lesson 
folder as you need it, and then delete it after you’ve completed the lesson if desired. 
Some lessons build on preceding lessons: In those cases, a starting project file is 
provided for you for the second lesson or project. You do not have to save any fin- 
ished project if you don’t want to or if you have limited hard-drive space. 


Copying the Sample Movies and Projects 


You will create and publish SWF animation files in some lessons in this book. The 
files in the End folders (01End, 02End, and so on) within the Lesson folders are 
samples of completed projects for each lesson. Use these files for reference if you 
want to compare your work in progress with the project files used to generate the 
sample movies. The end project files vary in size from relatively small to a couple of 
megabytes, so you can either copy them all now if you have ample storage space or 
copy just the end project file for each lesson as needed. Then you can delete it when 
you finish that lesson. 


How to Use the Lessons 


Each lesson in this book provides step-by-step instructions for creating one or more 
specific elements of a real-world project. Some lessons build on projects created in 
preceding lessons; most stand alone. All the lessons build on each other in terms of 
concepts and skills, so the best way to learn from this book is to proceed through 
the lessons in sequential order. In this book, some techniques and processes are 
explained and described in detail only the first few times you perform them. 


The organization of the lessons is also project oriented rather than feature oriented. 
That means, for example, that you'll work with symbols on real-world design proj- 
ects over several lessons rather than in just one chapter. 


Additional Resources 


Adobe Flash CSS Professional Classroom in a Book is not meant to replace docu- 
mentation that comes with the program or to be a comprehensive reference for 
every feature. Only the commands and options used in the lessons are explained in 
this book. For comprehensive information about program features and tutorials, 
refer to these resources: 


Adobe Community Help: Community Help brings together active Adobe product 
users, Adobe product team members, authors, and experts to give you the most 


useful, relevant, and up-to-date information about Adobe products. Whether 
you're looking for a code sample or an answer to a problem, have a question about 
the software, or want to share a useful tip or recipe, you'll benefit from Community 
Help. Search results will show you not only content from Adobe, but also from the 
community. 


With Adobe Community Help you can: 
e Access up-to-date definitive reference content online and offline 


e Find the most relevant content contributed by experts from the Adobe 
community, on and off Adobe.com 


e Comment on, rate, and contribute to content in the Adobe community 
e Download Help content directly to your desktop for offline use 
e Find related content with dynamic search and navigation tools 


To access Community Help: If you have any Adobe CS5 product, then you already 
have the Community Help application. To invoke Help, choose Help > Flash help. 
This companion application lets you search and browse Adobe and community 
content, plus you can comment on and rate any article just like you would in the 
browser. However, you can also download Adobe Help and language reference 
content for use offline. You can also subscribe to new content updates (which can 
be automatically downloaded) so that you'll always have the most up-to-date con- 
tent for your Adobe product at all times. You can download the application from 
www.adobe.com/support/chc/index.html. 


Adobe content is updated based on community feedback and contributions. 

You can contribute in several ways: add comments to content or forums, including 
links to Web content; publish your own content using Community Publishing; 

or contribute Cookbook Recipes. Find out how to contribute: www.adobe.com/ 
community/publishing/download.html 


See http://community.adobe.com/help/profile/faq.html for answers to frequently 
asked questions about Community Help. 


Adobe Flash CS5 Professional Help and Support: www.adobe.com/support/flash 
where you can find and browse Help and Support content on adobe.com. 


Adobe TV: http://tv.adobe.com is an online video resource for expert instruction 
and inspiration about Adobe products, including a How To channel to get you 
started with your product. 


Adobe Design Center: www.adobe.com/designcenter offers thoughtful articles 
on design and design issues, a gallery showcasing the work of top-notch designers, 
tutorials, and more. 


Adobe Developer Connection: www.adobe.com/devnet is your source for techni- 
cal articles, code samples, and how-to videos that cover Adobe developer products 
and technologies. 
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Resources for educators: www.adobe.com/education includes three free curricu- 
lums that use an integrated approach to teaching Adobe software and can be used 
to prepare for the Adobe Certified Associate exams. 


Also check out these useful links: 


Adobe Forums: http://forums.adobe.com lets you tap into peer-to-peer discus- 
sions, questions and answers on Adobe products. 


Adobe Marketplace & Exchange: www.adobe.com/cfusion/exchange is a central 
resource for finding tools, services, extensions, code samples, and more to supple- 
ment and extend your Adobe products. 


Adobe Flash Professional CS5 product home page: www.adobe.com/ 
products/flash 


Adobe Labs: http://labs.adobe.com gives you access to early builds of cutting-edge 
technology, as well as forums where you can interact with both the Adobe devel- 
opment teams building that technology and other like-minded members of the 
community. 


Adobe Certification 


The Adobe training and certification programs are designed to help Adobe custom- 
ers improve and promote their product-proficiency skills. There are four levels of 
certification: 


e Adobe Certified Associate (ACA) 

e Adobe Certified Expert (ACE) 

e Adobe Certified Instructor (ACI) 

e Adobe Authorized Training Center (AATC) 


The Adobe Certified Associate (ACA) credential certifies that individuals have the 
entry-level skills to plan, design, build, and maintain effective communications 
using different forms of digital media. 


The Adobe Certified Expert program is a way for expert users to upgrade their 
credentials. You can use Adobe certification as a catalyst for getting a raise, finding 
a job, or promoting your expertise. 


If you are an ACE-level instructor, the Adobe Certified Instructor program 
takes your skills to the next level and gives you access to a wide range of Adobe 
resources. 


Adobe Authorized Training Centers offer instructor-led courses and training 
on Adobe products, employing only Adobe Certified Instructors. A directory of 
AATCs is available at http://partners.adobe.com. 


For information on the Adobe Certified programs, visit www.adobe.com/support/ 
certification/main.html. 


Accelerate your workflow with 
Adobe CS Live 


Adobe CS Live is a set of online services that harness the connectivity of the web and integrate with 
Adobe Creative Suite 5 to simplify the creative review process, speed up website compatibility testing, 
deliver important web user intelligence and more, allowing you to focus on creating your most impactful 
work. CS Live services are complimentary for a limited time* and can be accessed online or from within 
Creative Suite 5 applications. 


vN Adobe BrowserLab is for web designers and developers who need to preview and test their web pages 

on multiple browsers and operating systems. Unlike other browser compatibility solutions, BrowserLab 
renders screenshots virtually on demand with multiple viewing and diagnostic tools, and can be used with 
Dreamweaver CS5 to preview local content and different states of interactive pages. Being an online service, 
BrowserLab has fast development cycles, with greater flexibility for expanded browser support and updated 
functionality. 


=g] Adobe CS Review is for creative professionals who want a new level of efficiency in the creative review 
S= process. Unlike other services that offer online review of creative content, only CS Review lets you publish 
a review to the web directly from within InDesign, Photoshop, Photoshop Extended, and Illustrator and view 
reviewer comments back in the originating Creative Suite application. 


pr Acrobat.com is for creative professionals who need to work with a cast of colleagues and clients in order 
to get a creative project from creative brief to final product. Acrobat.com is a set of online services that 

includes web conferencing, online file sharing and workspaces. Unlike collaborating via email and attend- 

ing time-consuming in-person meetings, Acrobat.com brings people to your work instead of sending files to 

people, so you can get the business side of the creative process done faster, together, from any location. 


Adobe Story is for creative professionals, producers, and writers working on or with scripts. Story is a 
collaborative script development tool that turns scripts into metadata that can be used with the Adobe 
CS5 Production Premium tools to streamline workflows and create video assets. 


SiteCatalyst NetAverages is for web and mobile professionals who want to optimize their projects for 
wider audiences. NetAverages provides intelligence on how users are accessing the web, which helps 
reduce guesswork early in the creative process. You can access aggregate user data such as browser type, 
operating system, mobile device profile, screen resolution and more, which can be shown over time. The data is 
derived from visitor activity to participating Omniture SiteCatalyst customer sites. Unlike other web intelligence 
solutions, NetAverages innovatively displays data using Flash, creating an engaging experience that is robust 
yet easy to follow. 


You can access CS Live three different ways: 


1 Set up access when you register your Creative Suite 5 products and get complimentary access that includes 
all of the features and workflow benefits of using CS Live with CS5. 


2 Setup access by signing up online and get complimentary access to CS Live services for a limited time. 
Note, this option does not give you access to the services from within your products. 
3 Desktop product trials include a 30-day trial of CS Live services. 


*CS Live services are complimentary for a limited time. See www.adobe.com/go/cslive for details. 
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GETTING ACQUAINTED 


Lesson Overview 

In this lesson, you'll learn how to do the following: 
e Create a new file in Flash 

e Adjust Stage settings in the Properties inspector 
e Add layers to the Timeline 

e Manage keyframes in the Timeline 

e Work with imported images in the Library panel 
e Move and reposition objects on the Stage 

e Open and work with panels 

e Select and use tools in the Tools panel 

e Preview your Flash animation 

e Save your Flash file 


e Access online resources for Flash 


This lesson will take less than an hour to complete. Copy the Lesson01 
folder from the Adobe Flash Professional CSS Classroom in a Book CD 
onto your hard drive if it’s not already there. 


@ photo3 

@ photo2 

@ photol 
W@W background 


Jog 


In Flash, the Stage is where the action takes place, 
the Timeline organizes frames and layers, and other 
panels let you edit and control your creation. 


@ Note: You can also 
start Flash by double- 
clicking a Flash (*.fla) 


file, such as the 01End. 


fla file that is provided 
to show you the 
completed project. 


Starting Flash and Opening a File 


The first time you start Flash you'll see a Welcome screen with links to standard 


file templates, tutorials, and other resources. In this lesson, you'll create a simple 


animation to showcase a few vacation snapshots. You'll add the photos and a title, 


and in the process you'll learn about positioning elements on the Stage and placing 


them along the Timeline. 


1 


Start Adobe Flash Professional. In Windows, choose Start > Programs > Adobe 
Flash Professional CS5. In Mac OS, click Adobe Flash Professional CS5 in the 
Applications folder or the Dock. 


Choose File > Open. In the Open dialog box, select the 01End.swf file in the 
Lesson01/01End folder and click Open to preview the final project. 


An animation plays. During the animation, several overlapping photos appear 


one by one, ending with a title. 


3 Close the preview window. 


4 Choose File > New. In the New Document dialog box, choose ActionScript 3.0. 


Click OK. 


ActionScript 3.0 is the latest version of Flash’s scripting language, which you 
use to add interactivity. ActionScript 3.0 requires your browser to have Flash 
Player 9 or later. In this lesson, you will not be working with ActionScript, but 
you still must choose with which version your file is compatible. 
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5 Choose File > Save. Name the file 01_workingcopy.fla, and from the Format 
pull-down menu choose Flash CS5 document (*.fla). Save it in the 01Start folder. 
Saving your file right away is a good working habit and ensures your work won't 
be lost if the application or your computer crashes. You should always save your 
Flash file with the extension .fla to identify it as the Flash source file. 


Getting to Know the Workspace 


The Adobe Flash Professional work area includes the command menus at the top 
of the screen and a variety of tools and panels for editing and adding elements to 
your movie. You can create all the objects for your animation in Flash, or you can 
import elements you've created in Adobe Illustrator, Adobe Photoshop, Adobe 
After Effects, and other compatible applications. 


By default, Flash displays the menu bar, Timeline, Stage, Tools panel, Properties 
inspector, and a few other panels. As you work in Flash, you can open, close, dock, 
undock, and move panels around the screen to fit your work style or your screen 


resolution. 


Clase: 


ES 
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Choosing a new workspace 


Flash also provides a few preset panel arrangements that may better suit the needs 
of particular users. The various workspace arrangements are listed in a pull-down 
menu at the top right of the Flash workspace or in the top menu under Window > 


Workspace. 
1 Click the Essentials button at the top [ESSENTIALS =] | [© OwCSiverw 
right of the Flash workspace and choose Í Armato — 
assic 
a new workspace. Debug iy 
Designer x 
The various panels are rearranged and j__ Developer wi 
, : a v Essentials 
resized according to their importance Small Screen a 
to the particular user. For example, the Reset 'Essentials' ) ) 
“ š New Workspace... ` 
Animator and Designer workspaces | Manage Workspaces... Pommi T 
put the Timeline at the top for easy and i =œ | 


frequent access. 


2 Ifyou’ve moved some of the panels around and want to return to one of the 
prearranged workspaces, choose Window > Workspace > Reset and the name of 
the preset workspace. 


3 To return to the default workspace, choose Window > Workspace > Essentials. 
In this Classroom in a Book, we'll be using the Essentials workspace. 


Saving your workspace 


If you find an arrangement of panels comfortable for your style of work, you can 
save the custom workspace to return to it at a later date. 


1 Click the Workspace button at the top-right corner of the Flash workspace and 
choose New Workspace. 


The New Workspace dialog box appears. 


2 Enter a name for your new workspace. Click OK. 


Animator New Workspace 

Classic 

Designer - z 
Developer ( Cancel 
v Essentials 


Small Screen 


Reset 'Essentials' 
New Workspace... \ 
Manage Workspaces... 


The current arrangement of panels is saved. Your workspace is added to the 
options in the Workspace pull-down menu, which you can access at any time. 
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About the Stage 


The big white rectangle in the middle of your screen is called the Stage. As with a 
theater stage, the Stage in Flash is the area that viewers see when a movie is playing. 
It contains the text, images, and video that appear on the screen. Move elements on 
and off the Stage to move them in and out of view. You can use the rulers (View > 
Rulers) or grids (View > Grid > Show Grid) to help you position items on the Stage. 
Additionally, you can use the Align panel and other tools you'll learn about in the 
lessons in this book. 


By default, you'll see the gray area off the Stage where you can place elements that 
won't be visible to your audience. The gray area is called the Pasteboard. To just 
see the Stage, choose View > Pasteboard to deselect the option. For now, leave the 
option selected. 


To scale the Stage so that it fits completely SEE. 
in the application window, choose View > - E 


Show Frame | 


Magnification > Fit in Window. You can also — Fl 

choose different magnification view options pal jeusH 

from the pop-up menu just above the Stage. ae Player: 
800% Script 


Changing the Stage properties 


You'll first want to set the color and the dimensions of the Stage. These options are 
available in the Properties inspector, which is the vertical panel just to the right of 
the Stage. 


1 At the bottom of the Properties inspector, note that the dimensions of the 
current Stage are set at 550 x 400 pixels. Click the Edit button. 


Document 
Fl 


01_workingcopy.fla 


x7 PUBLISH 
Player: Flash Player 10 


Script: ActionScript 3.0 


Class: a 


Profile: Default Edit... 


AIR Settings 


ActionScript Settings Edit... 


s7 PROPERTIES 


FPS: 24,00 


Size: 550 x 400 px 


Stage: 


vy SWF HISTORY 


Log Clear 


The Document Settings dialog box appears. 
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2 Inthe Width and Height boxes, enter new pixel dimensions. Enter 800 for the 
Width and 600 for the Height. 


3 Click the Background color button and choose a new color for the Stage. 
Choose dark gray (#333333). 


Document Settings 


Dimensions: | 800 px (width) x |600px | (height) 
[M Adjust 3D Perspective Angle to preserve current stage projection Cancel 
its: Match: 
Ruler units: | Pixels ly © Default 
© Contents 
O Printer 


Background color: B 


Frame rate: 24.00 


Make Default 


4 Click OK. Your Stage is now a different dimension and color. You can also 
change the Stage color by clicking the Stage button directly in the Properties 
inspector. You can change the Stage properties at any time. 


Working with the Library Panel 


@ Note: You'll learn The Library panel is accessible from a tab just to the right of the Properties inspec- 

much more about tor. The Library panel is where you store and organize symbols created in Flash, 

poner as well as imported files, including bitmaps, graphics, sound files, and video clips. 
Symbols are often-used graphics used for animation and for interactivity. 


About the Library panel 


The Library panel lets you organize library items in folders, see how often an item is 
used in a document, and sort items by type. When you import items into Flash, you 
can import them directly onto the Stage or into the library. However, any item you 
import onto the Stage is also added to the library, as are any symbols you create. 
You can then easily access the items to add them to the Stage again, edit them, or 
see their properties. 


To display the Library panel, choose Window > Library, or press Ctrl+L (Windows) 
or Command+L (Mac). 
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Importing an item to the Library panel 


Often, you'll be creating graphics directly with Flash’s drawing tools and saving 
them as symbols, which are stored in the library. Other times you'll be importing 
media such as JPEG images or MP3 sound files, which are also stored in the library. 
In this lesson, you'll import several JPEG images into the library to be used in the 
animation. 


1 Choose File > Import > Import to Library. In the Open dialog box, select the 
background.jpg file in the Lesson01/01Start folder, and click Open. 


2 Flash imports the selected JPEG image and places it in the Library panel. 


3 Continue importing photol.jpg, photo2.jpg, and photo3.jpg from the 01Start 
folder. Don’t import the last image, photo4.jpg. You'll use that image later in 
this lesson. 


You can also hold down the Shift key to select multiple files and import all of 
them at once. 


4 The Library panel displays all the imported JPEG images with their filenames 
and a thumbnail preview. These images are now available to be used in your 
Flash document. 


|) background.jpg 
|) photol.jpg 
|| photo2.jpg 
Œ| photo3.jpg 
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Adding an item from the Library panel to the Stage 

To use an imported image, simply drag it from the Library panel onto the Stage. 
1 Choose Window > Library to open the Library panel if it isn’t already open. 
2 Select the background.jpg item in the Library panel. 


3 Drag the background.jpg item onto the Stage and place it approximately in the 


center of the Stage. 


Understanding the Timeline 


The Timeline is located below the Stage. Like films, Flash documents measure time 
in frames. As the movie plays, the playhead, shown as a red vertical line, advances 
through the frames in the Timeline. You can change the content on the Stage for 
different frames. To display a frame’s content on the Stage, move the playhead to 
that frame in the Timeline. 


At the bottom of the Timeline, Flash indicates the selected frame number, the cur- 
rent frame rate (how many frames play per second), and the time that has elapsed 
so far in the movie. 


The Timeline also contains layers, which help you organize the artwork in your 
document. Think of layers as multiple film strips stacked on top of each other. Each 
layer contains a different image that appears on the Stage, and you can draw and 
edit objects on one layer without affecting objects on another layer. The layers are 
stacked in the order in which they overlap each other, so that objects on the bottom 
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layer in the Timeline are on the bottom of the stack on the Stage. You can hide, 
show, lock, or unlock layers. Each layer’s frames are unique, but you can drag them 
to a new location on the same layer or copy or move them to another layer. 


Renaming a layer 


It’s a good idea to separate your content on different layers and name each layer to 
indicate its contents so that you can easily find the layer you need later. 


1 Select the existing layer in the Timeline. 
2 Double-click the name of the layer to rename it and type background. 
3 Click outside the name box to apply the new name. 


reune [MOTION EON | 


background J 


Jog 1} OCI  2400fps 00s 


4 Click the dot below the lock icon to lock the layer. Locking a layer prevents you 
from accidentally making changes to it. 


neue [mononeonron| >>> 


"1 background 


Ee | a, OR 24,00 fps 0.0s 


Adding a layer 


A new Flash document contains only one layer, but you can add as many layers as 
you need. Objects in the top layers will overlap objects in the bottom layers. 


1 Select the background layer in the Timeline. 
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2 Choose Insert > Timeline > Layer. You can also click the New Layer button 
below the Timeline. A new layer appears above the background layer. 


New Symbol... F8 


Motion Tween 
Shape Tween 
Classic Tween 


Timeline 


Layer Folder 
Scene 


Frame F5 
Keyframe 
Blank Keyframe 


3 Double-click the new layer to rename it and type photo1. Click outside the 
name box to apply the new name. 


Your Timeline now has two layers. The background layer contains the 
background photo, and the newly created photo1 layer above it is empty. 


4 Select the top layer called photo1. 

5 Choose Window > Library to open the Library panel if it isn’t already open. 

6 Dragthe library item called photo1.jpg from the library on to the Stage. 
The photo1 JPEG appears on the Stage and overlaps the background JPEG. 


=" photol 
background 
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7 Choose Insert > Timeline > Layer or click the New Layer button ( al ) below the 
Timeline to add a third layer. 


8 Rename the third layer photo2. 


TIMELINE 


q photol -- ol 
@ background sany 


Working with Layers 


If you don’t want a layer, you can easily delete it by selecting it and then clicking 
the Delete button below the Timeline. 


TIMELINE 


= photo2 
q photol . ay 
q background -anl 


EO) MES EE ORE 


If you want to rearrange your layers, simply click and drag any layer to move it toa 
new position in the layer stack. 


Inserting frames 


So far, you have a background photo and another overlapping photo on the Stage, 
but your entire animation exists for only a single frame. To create more time on the 
Timeline, you must add additional frames. 


1 Select frame 48 in the background layer. 


TIMELINE 


GW photo2 
@ photol | 
™ background x | K 


200 00s OOOO 


Jag MESEL TE: 
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2 Choose Insert > Timeline > Frame (F5). You can also right-click (Windows) or 
Ctrl-click (Mac) and choose Insert Frame from the context menu that pops up. 


Flash adds frames in the background layer up to the selected point, frame 48. 


= q] photo2 
@ photol +--+ 
“ background g 


3 Select frame 48 in the photol layer. 


4 Choose Insert > Timeline > Frame (F5). You can also right-click/Ctrl-click and 
choose Insert Frame from the context menu. 


Flash adds frames in the photol layer up to the selected point, frame 48. 
5 Select frame 48 in the photo2 layer and insert frames on this layer. 


You now have three layers, all with 48 frames on the Timeline. Since the frame rate 
of your Flash document is 24 frames per second, your current animation lasts two 
seconds. 


TIMELINE 


Pee e eee eee eee eee ee ee et tt EE r] 


QW photol 
@ background -a, 


Jag iil} @ Bee 48 2400fps 20s AT 


Selecting Multiple Frames 


Just as you can hold down the Shift key to select multiple files on your desktop, you 
can hold down the Shift key to select multiple frames on the Flash Timeline. If you 
have several layers and want to insert frames into all of them, hold down the Shift 
key and click on the point at which you want to add frames in all of your layers. 
Then choose Insert > Timeline > Frame. 
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Creating a keyframe 


A keyframe indicates a change in content on the Stage. Keyframes are indicated on 
the Timeline as a circle. An empty circle means there is nothing in that particular 
layer at that particular time. A filled-in black circle means there is something in 
that particular layer at that particular time. The background layer, for example, 
contains a filled keyframe (black circle) in the first frame. The photo1 layer also 
contains a filled keyframe in its first frame. Both layers contain photos. The photo2 
layer, however, contains an empty keyframe in the first frame, indicating that it is 
currently empty. 


You'll insert a keyframe in the photo2 layer at the point in time when you want the 
next photo to appear. 


1 Select frame 24 on the photo2 layer. As you select a frame, Flash displays the 
frame number beneath the Timeline. 


TIMELINE 


@ photol 
@ background 


So |} m Oo HE) 24 2400fps 10s M I 


2 Choose Insert > Timeline > Keyframe (F6). 


A new keyframe, indicated by an empty circle, appears in the photo2 layer in 
frame 24. 


© photol 
@ background -a, 


alow (i OBE} 24 2400fps 10s pa] ] 


Select the new keyframe at frame 24 in the photo2 layer. 
4 Drag the photo2.jpg item from your library onto the Stage. 


The empty circle at frame 24 becomes filled, indicating there is now a change in 
the photo2 layer. At frame 24, your photo appears on the Stage. You can click 
and drag the red playhead from the top of the Timeline to “scrub,” or show 
what’s happening on the Stage at any point along the Timeline. You'll see that 
the background photo and photol remain on the Stage throughout the Timeline 
but photo2 appears only at frame 24. 
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Understanding frames and keyframes is essential for mastering Flash. Be sure you 
understand how the photo2 layer contains 48 frames with 2 keyframes—an empty 
keyframe at frame 1 and a filled keyframe at frame 24. 


SPQ 
wW aa + 


W@W photol 
@ background 


Moving a keyframe 


If you want your photo2.jpg to appear later or earlier, you need to move the key- 
frame in which it appears later or earlier along the Timeline. You can easily move 
any keyframe along the Timeline by simply selecting it and then dragging it toa 
new position. 


1 Select the keyframe in frame 24 on the photo2 layer. 


2 Move your mouse cursor slightly, and you'll see a box icon appear near your 
cursor indicating that you can reposition the keyframe. 
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3 Click and drag the keyframe to frame 12 in the photo2 layer. 


meone [MORON EDITOR 


WW photol 
@ background 


TIMELINE 


GW photol 
@ background -a De 


Removing Keyframes 


If you want to remove a keyframe, do not press the Delete key! Doing so will delete 
the contents of that keyframe on the Stage. Instead, select the keyframe and choose 
Modify > Timeline > Clear Keyframe (Shift+F6). Your keyframe will be removed from 
the Timeline. 


Organizing Layers in a Timeline 


At this point, your working Flash file has only three layers: a background layer, a 
photol layer, and a photo2 layer. You'll be adding additional layers for this project, 
and like most other projects, you'll end up having to manage multiple layers. Layer 
folders help you group related layers to keep your Timeline organized and manage- 
able, just like you make folders for related documents on your desktop. Although it 
may take some time to create the folders, you'll save time later because you'll know 
exactly where to look for a specific layer. 


Creating layer folders 


For this project, you'll continue to add layers for additional photos, and you'll place 
those layers in a layer folder. 


1 Select the photo2 layer and click the New Layer button ( al ). 
2 Name the layer photo3. 


3 Insert a keyframe at frame 24. 
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4 Drag the photo3.jpg from the library onto the Stage. 


You now have four layers. The top three contain photos of scenes from Coney 
Island that appear at different keyframes. 


"| photo3 
@ photo2 
W@W photol 
@ background 


5 Select the photo3 layer and click the New Folder icon ( — ). 
A new layer folder appears above the photo3 layer. 
6 Name the folder photos. 


. 
GW photo3 . 

W@W photo2 + + Bo 
q photol . o 
@ background àn 
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Adding layers to layer folders 


Now you'll add the photo layers to the photo folder. As you arrange layers, remem- 
ber that Flash displays the layers in the order in which they appear in the Timeline, 
with the top layer at the front and the bottom layer at the back. 


1 Drag the photol layer into the photo folder. 


Notice how the bold line indicates the destination of your layer. When a layer is 


placed inside a folder, the layer name is indented. 


v G photos 
o———_ 

W@W photo3 

q photo2 


@ background 


2 Drag the photo2 layer into the photo folder. 
3 Drag the photo3 layer into the photo folder. 
All three photo layers should be in the photo folder. 


TIMELINE 


v photos 


. 
@ photo2 . 
@ photol . e He 
@ background . 


You can collapse the folder by clicking the arrow. Expand the folder by clicking 
the arrow again. Be aware that if you delete a layer folder, you delete all the layers 
inside that folder as well. 


Changing the appearance of the Timeline 


You can adjust the Timeline’s appearance to accom- EE Tiny 

modate your workflow. When you want to see more F ai 
layers, select Short from the Frame View pop-up Medium 
menu in the upper-right corner of the Timeline. Eeka 


Preview in Context 


The Short option decreases the height of frame cell 


rows. The Preview and Preview in Context options on 


display thumbnail versions of the contents of your E 
keyframes in the Timeline. 


You can also change the width of the frame cells by selecting Tiny, Small, Normal, 
Medium, or Large. 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 


25 


Using the Properties Inspector 


The Properties inspector gives you quick access to the attributes you’re most likely 
to need. What appears in the Properties inspector depends on what you've selected. 
For example, if nothing is selected, the Properties inspector includes options for 
the general Flash document including changing the Stage color or dimensions; if an 
object on the Stage is selected, the Properties inspector shows its x and y coordi- 
nates and its width and height, among other information. You'll use the Properties 
inspector to move your photos on the Stage. 


Positioning an object on the Stage 


You'll begin by moving the photos with the Properties inspector. You'll also use the 
Transform panel to rotate the photos. 


1 At frame 1 of the Timeline, select the photol.jpg that you dragged onto the 
Stage in the photol layer. A blue outline indicates that the object is selected. 


2 In the Properties inspector, type 50 for the X value and 50 for the Y value. Press 
Enter/Return to apply the values. You can also click and drag your mouse cursor 
over the X and Y values to change their positions. The photo moves to the left 
side of the Stage. 


® Note: If the Properties inspector is not open, choose Window > Properties, or press Ctrl/ 
Command+F3. 
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The X and Y values are measured on the Stage from the top-left corner. 
X begins at 0 and increases to the right, and Y begins at 0 and increases 
downward. The registration point for imported photos is at the top-left corner. 


3 Choose Window > Transform to open the Transform panel. 


4 Inthe Transform panel, select Rotate, and type -12 in the Rotate box, or click and 
drag over the value to change the rotation. Press Enter/Return to apply the value. 


The selected photo on the Stage rotates 12 degrees counterclockwise. 


¥ 99° Z 9.0° 
3D Center point 
x00 YOO Z 9.0 


5 Select frame 12 of the photo2 layer. Now click on the photo2.jpg on the Stage. 


6 Use the Properties inspector and Transform panel to position and rotate the 
second photo in an interesting way. Use X=80, Y=50, and a Rotate of 6 to give it 
some contrast with the first photo. 


Y: 09° Z: 9.9° 


Z: 0.9 


Ga ik 
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Working with Panels 


Just about everything you do in Flash involves a 
panel. In this lesson, you use the Library panel, 
Tools panel, Properties inspector, Transform 
panel, History panel, and the Timeline. In later les- 
sons, you'll use the Actions panel, the Color panel, 
the Motion panel, and other panels that let you 
control various aspects of your project. Because 
panels are such an integral part of the Flash work- 
space, it pays to know how to manage them. 


To open any panel in Flash, choose its name from 
the Window menu. In a few cases, you may need 
to choose the panel from a submenu, such as 
Window > Other Panels > History. 


By default, the Properties inspector, Library panel, 
and Tools panel appear together at the right of 
the screen; the Timeline and Motion Editor are at 
the bottom; and the Stage is on the top. However, 
you can move a panel to any position that is 
convenient for you. 


e Toundocka panel from the right side of the 
screen, drag it by its tab to a new location. 


e To dock a panel, drag it by its tab into the 
dock at a new position on the screen. You 
can drag it to the top, bottom, or in between 
other panels. A blue highlight indicates where 
you can dock a panel. 


e To group a panel with another, drag its tab 
onto the other panel’s tab. 


Duplicate Window 


Toolbars 
v Timeline 
Motion Editor 
v Tools 
v Properties 
Library 
Common Libraries 
Motion Presets 


Actions 

Code Snippets 
Behaviors 
Compiler Errors 
Debug Panels 
Movie Explorer 
Output 


Align 
Color 

Info 
Swatches 
Transform 


Components 
Component Inspector 
Other Panels 


Workspace 
Hide Panels 


v 101_workingcopy.fla 


e To move a panel group, drag the group by its dark gray top bar. 


F2 
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> Accessibility 


> 
F4 


You also have the option of displaying most of the panels as icons to save space but still maintain quick access. 
Click the upper-right arrows to collapse the panels to icons. Click the arrows again to expand the panels. 
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7 Select frame 24 in the photo3 layer. Now click on the photo3.jpg on the Stage. 


8 Use the Properties inspector and Transform panel to position and rotate the 
third photo in an interesting way. Use X=120, Y=55, and a Rotate of —2 to give 
it some contrast with the other photos. 


3D Center point 
X: 0,0 Y: 0,0 Z: 0.0 


a ie 


Using the Tools Panel 


The Tools panel—the long, narrow panel on the far right side of the work area— 
contains selection tools, drawing and type tools, painting and editing tools, naviga- 
tion tools, and tool options. You'll use the Tools panels frequently to switch from 
the Selection tool to the Text tool to a drawing tool. When you select a tool, check 
the options area at the bottom of the panel for more options and other settings 
appropriate for your task. 


Selecting and using a tool 


When you select a tool, the options available at the bottom of the Tools panel and 
the Properties inspector change. For example, when you select the Rectangle tool, 
the Object Drawing mode and Snap To Objects options appear. When you select 
the Zoom tool, the Enlarge and Reduce options appear. 


The Tools panel contains too many tools to display all at once. Some tools are 
arranged in groups in the Tools panel; only the tool you last selected from a group 
is displayed. A small triangle in the lower-right corner of the tool’s button indicates 
there are other tools in the group. Click and hold the icon for the visible tool to see 
the other tools available, and then select one from the pop-up menu. 


@ Note: When images 
are scaled or rotated in 
Flash, they may appear 
jagged. You can smooth 
them out by double- 
clicking the bitmap icon 
in the Library panel. In 
the Bitmap Properties 
dialog box that appears, 
select the Allow 
Smoothing option. 
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You'll use the Text tool to add a title to your animation. 


1 
2 
3 


Select the top layer in the Timeline, and then click the New Layer button. 
Name the new layer text. 


Lock the other layers below it so you don’t accidentally move anything into 
them. 


In the Timeline, move the playhead to frame 36 and select frame 36 in the text 
layer. 


Choose Insert > Timeline > Keyframe (F6) to insert a new keyframe at frame 36 
in the text layer. 


TIMELINE 


N 
. 


“I text 
Y G photos . 
q photo3 . 
SG photo2 . 
. 
. 


@ photol 
@ background 


Sow 


[+ @ DBC? 36 «24,00 fps 15s 


You will create text to appear at frame 36 in this layer. 


In the Tools panel, select the Text tool, which is indicated by 
the large capital letter T. 


In the Properties inspector, choose Classic Text from the pull- 
down menu. Choose Static Text from the pull-down menu that 


appears below. 


Classic Text is a mode for adding simple text that doesn’t 

require sophisticated options such as multiple columns or wrapping around 
other objects. Static Text is the option for any text that is used for display 
purposes. Dynamic and Input Text are special text options for more interactive 
purposes and can be controlled with ActionScript. You'll learn about more 
advanced text options in Lesson 7. 


Select a font and size in the Properties inspector. Your computer may not have 
the same fonts as those shown in this lesson, but choose one that is close in 
appearance. 


Click the colored square in the Properties inspector to choose a text color. You 
can click on the color wheel at the upper right to access the Adobe Color Picker, 
or you can change the Alpha percentage at the upper right, which determines 
the level of transparency. 
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Text Tool 


Classic Text 


Static Text 


ly 


s7 CHARACTER 


Family: | Cooper Black X 


Current color 


oluner| Ee 


#CCEFOO 


i IZ o 
sye aa La 
Size: 52,Qpt Letter spacing: 0.0 
Color: E] M Auto kern 


Alpha:% 100 


| Transparency 


@— Color Picker 


— Color choices 


10 Make sure the empty keyframe in frame 36 of the title layer is selected, and then 
click on the Stage where you want to begin adding text. You can either click 
once and begin typing, or you can click and drag to define the width of your 


text field. 


11 Type in a title that describes the photos that are being displayed on the Stage. 


v G photos 


@ photo3 aa. 
W@W photo2 -a D, 
q photol au. 
@ background aa. 
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Getting Acquainted 


Tools Panel Overview 


The Tools panel contains selection tools, drawing and painting tools, and naviga- 
tion tools. The options area in the Tools panel lets you modify the selected tool. 
The expanded menu on the right shows the hidden tools. The black squares on 
the expanded menu to the right indicate the default tool that appears on the Tool 
panel. The single capital letters in parentheses indicate the keyboard shortcuts to 
select those tools. Notice how the tools are grouped together by similar function. 


Selection — 
tools 


Drawing and — 
Type tools 


Retouching — 
tools 


Navigation + 


tools 


Colors area — 


Options area + 


4 


Selection (V) — | 


t 


y | 


Subselection (A) — 


= B'f Free Transform Tool (Q) 
3 Gradient Transform Tool (F) 


= QD 3D Rotation Tool (W) 
as 3D Translation Tool (G) 


VOR 


Lasso (L) — 
%, 
Text (1) + T 
Line (L) — N 
a, 
Pencil (Y) — 7 
f., 


Deco (U) — #7 
Ê, 
Al 


Eyedropper (I) — Pd 


Eraser (E) — Æ 
Hand (H) — $") 
Zoom (Z) — 


Stroke Color — 


Fill Color — 
Black and white — 
Swap colors — 
A 
"S 
*4 


— u <7 Bone Tool (M) 


= ( Pen Tool (P) 
()* Add Anchor Point Tool (=) 
Y Delete Anchor Point Tool (-) 
N Convert Anchor Point Tool (C) 


Ca L] Rectangle Tool (R) 

@ Oval Tool (0) 

@ Rectangle Primitive Tool (R) 
> Oval Primitive Tool (O) 

O PolyStar Tool 


'—-= ¥ Brush Tool (B) 
“a Spray Brush Tool (B) 


I 


QP Bind Too! (M) 


I 


n & Paint Bucket Tool (K) 
@> Ink Bottle Tool (S) 


12 Exit the Text tool by selecting the Selection tool ( } ). 


13 Use the Properties inspector or the Transform panel to reposition or rotate 
your text on the Stage, if desired. Or, choose the Selection tool and simply drag 
your text to a new position on the Stage. The X and Y values in the Properties 
inspector update as you drag the text around the Stage. 


14 Your animation for this lesson is finished! Compare your file with the final file, 
01End.fla. 


Undoing Steps in Flash 


In a perfect world, everything would go according to plan. But sometimes you need 
to move back a step or two and start over. You can undo steps in Flash using the 
Undo command or the History panel. 


To undo a single step in Flash, choose Edit > Undo or press Ctrl/Command+Z. To 
redo a step you've undone, choose Edit > Redo. 


To undo multiple steps in Flash, it’s easiest to use the History panel, which displays 
a list of all the last 100 steps you’ve performed. Closing a document clears its his- 
tory. To access the History panel, choose Window > Other Panels > History. 


For example, if you aren’t satisfied with the newly added text, you can undo your 
work and return your Flash document to a previous state. 
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® Note: If you remove 
steps in the History 
panel and then perform 
additional steps, the 
removed steps will no 
longer be available. 


1 Choose Edit > Undo to undo the last action you made. You can choose the 
Undo command multiple times to move backward as many steps as are listed in 


the History panel. You can change the maximum number of Undo commands 
by selecting Flash > Preferences. 


2 Choose Window > Other Panels > History to open the History panel. 


3 Drag the History panel slider up to the step just before your mistake. Steps 
below that point are dimmed in the History panel and are removed from the 
project. To add a step back, move the slider back down. 


E} Select Layers 
E3 Move Layers 
E} Select Layers 
$2 Delete Layer 
fc Select Frames 


fc Select Frames 
+9 Lock Layers 
Ep Lock Layers 
cl Select Frames 


= Delete 


E} Select Layers 
E3 Move Layers 

Ge tg Select Layers 
Sip Delete Layer 


GL Select Frames 
O} Select Frames 
$p Lock Layers 
Èp Lock Layers 
cl Select Frames 


E Delete 


| Replay | 


Previewing Your Movie 


As you work on a project, it’s a good idea to preview it frequently to ensure that 
you're achieving the desired effect. To quickly see how an animation or movie will 
appear to a viewer, choose Control > Test Movie > in Flash Professional. You can 
also press Ctrl+Enter or Command+Return to preview your movie. 


1 Choose Control > Test Movie > in Flash Professional. 
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Flash creates a SWF file in the same location as your FLA file and opens and 
plays the file in a separate window. A SWF file is the compressed, published file 
that you would upload to the Web. 


Flash automatically loops your movie in this preview mode. If you don’t want 
the movie to loop, choose Control > Loop to deselect the option. 


2 Close the preview window. 


3 Click on the Stage with the Selection tool. Note at the bottom of the Properties 
inspector that the SWF History displays and keeps a log of the file size, date, and 
time of the most recent SWF file published. This will help you keep track of your 
work progress and revisions. 


PROPERTIES | LIBRARY | 


Document 


Fl 


01_workingcopy.fla 


s7 PUBLISH 
Player: Flash Player 10 
Script: ActionScript 3.0 


Class: A 


Profile: Default Edit... 


AIR Settings 


ActionScript Settings Edit... 


s7 PROPERTIES 


FPS: 24.00 


Size: 800 x 600 px Edit... 
Stage: = 


s7 SWF HISTORY 


Log Clear 


546.1 KB 11/18/09 12:49 PM 


Publishing Your Movie 


When you're ready to share your movie with others, publish it from Flash. For most @ Note: You'll learn 
projects, Flash will create an HTML file and a SWF file. The SWF file is your final more about publishing 
Flash movie, and the HTML file tells your Web browser how to display the SWF options inLesson 0: 
file. You'll need to upload both files to the same folder on your Web server. Always 

test your movie after uploading it to be certain that it’s working properly. 


1 Choose File > Publish Settings. 
2 Click the Formats tab. 
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3 Select Flash (.swf) and HTML (.html). 
Pb lish Settings S 
Current profile: | Default [=] Oo l+ Gale) a 


Type: File: 

M Flash (swf) 01_workingcopy.swf ø 
M HTML (html) '01_workingcopy.html ø 
C GIF Image (.gif) 01_workingcopy.gif F] 
L] JPEG Image (.jpg) 01_workingcopy.jpg E] 
CI PNG Image (.png) ‘01_workingcopy.png B 
[C Windows Projector (.exe) (01_workingcopy.exe GB 
C Macintosh Projector (01_workingcopy.app ø 


4 Click the HTML tab. 
5 Deselect the Loop option. 
Publish Setin 
Current profile:| Default Z| 1+ [Glo la 


Template: | Flash Only is ( Info ) 


[C] Detect Flash Version 


Version: 10 . 1 0 

Dimensions: | Match Movie [Z] 
Width: Height: 

800 X 600 pixels 


Playback: [ ] Paused at start M Display menu 
[C] Loop [C] Device font 


Quality: | High a 
Window Mode: 
HTML alignment: 


Horizontal: Vertical: 


Flash alignment: | Center Z { Center be 


M Show warning messages 
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6 Click Publish at the bottom of the Publish Settings dialog box. 


7 Click OK to close the dialog box. 


8 Navigate to the Lesson01/01Start folder to see the files Flash created. 


C 01Start 


— 


{ill 
8 


ES Q 


[a 


je 


> DEVICES 
PLACES 
SEARCH FOR 


SS T 


background.jpg photol.jpg 


— = 
tte Fá 
1 - as 
3 ‘Bi 


photo3.jpg photo4.jpg 


01_workingcopy.fla 


01_workingcopy.htm! 


=.) 


r 


photo2.jpg 


swe 
£ 


01_workingcopy.swf 


8 items, 40.06 GB availani— 


Saving Your Movie 


You've already saved your Flash movie as an FLA file, but another option is to save 


your movie in an uncompressed format known as an XFL format. The XFL format is 
actually a folder of files rather than a single document. The XFL file format exposes 
the contents of your Flash movie so that other developers or animators can easily 
edit your file or manage its assets without having to open the movie in the Flash 
application. For example, all the imported photos in your Library panel appear ina 
Library folder within the XFL format. You can edit the library photos or swap them 
with new photos. Flash will make the substitutions in the movie automatically. 


1 Choose File > Save As. 


2 Name the file 01_workingcopy.xfl and choose Flash CS5 Uncompressed 


Document (*.xfl). Click Save. 


Flash creates a folder named 01_workingcopy, which contains all the 


information about your Flash movie. 


Forma! Y Flash CS5 Document (*.fla) 
Flash CS4 Document (*.fla) 
Flash CS5 Uncompressed Document (*.xfl) 


( New Folder ) 


3 Close the Flash document by choosing File > Close. 
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Modifying an XFL document 


In this step, you'll modify the Library folder of the XFL document to make changes 
to your Flash movie. 


1 Open the LIBRARY folder inside the 01_workingcopy folder. 


The folder contains all the photos you imported into your Flash movie. 


L 01_workingcopy > ri! 01_workingcopy.xfl m= background.jpg 
a 01_workingcopy.fla @ bin r E photol.jpg 
® 01_workingcopy.htm! 5 DOMDocument.xml E photo2.jpg 
TF 01_workingcopy.swf E| photo3.jpg 
(0) META-INF 


— MobileSettings.xml 
Œ publishSettings.xml 


2 Select the photo3.jpg file and delete it. 


3 Drag the photo4.jpg file from the 01Start folder and move it to the LIBRARY 
folder inside the 01_workingcopy folder. Rename photo4.jpg as photo3.jpg. 


T 01_workingcopy.xfl = background.jpg Y Preview: 
B bin E photol.jpg 

al DOMDocument.xml E photo2.jpg 

i LIBRARY > 

(Gj META-INF 


È MobileSettings.xml 
È PublishSettings.xml 


Swapping out photo3.jpg with a new image in the LIBRARY folder 
automatically makes the change in the Flash movie. 


4 To open an XFL document, double-click the .xfl file. 


The last image in keyframe 24 of your Timeline has been swapped with the 
photo4.jpg image with which you made the substitution. 
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Finding Resources for Using Flash 


For complete and up-to-date informa- 


tion about using Flash panels, tools, Search GD 


and other application features, visit the Flash Help 
Adobe Web site. Choose Help > Flash a 
Help. 


Adobe Product Improvement Program... 


Flash Exchange 
You'll be connected to the Adobe Manage Extensions... 


Community Help Web site where you Adobe Online Forums 
can search Flash Help and support a 
documents, as well as other Web sites 

relevant to Flash users. You can nar- 


row your search results to view only Adobe help and support documents as well. 


If you plan to work in Flash when you're not connected to the Internet, down- 
load the most current PDF version of Flash Help from www.adobe.com/support/ 
documentation. 


For additional resources, such as tips and techniques and the latest product infor- 
mation, check out the Adobe Community Help page at community.adobe.com/ 
help/main. 


@ Note: If Flash 
detects that you are 
not connected to the 
Internet when you 
start the application, 
choosing Help > Flash 
Help opens the Help 
HTML pages installed 
with Flash. For more 
up-to-date information, 
view the Help files 
online or download 
the current PDF for 
reference. 
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Checking for Updates 


Adobe periodically provides updates to software. You can easily obtain these 
updates through Adobe Application Manager, as long as you have an active 
Internet connection. 


1 In Flash, choose Help > Updates. The Adobe Application Manager automatically 
checks for updates available for your Adobe software. 


Flash Help Fl 
Flash Support Center 


Adobe Product Improvement Program... 


Flash Exchange 
Manage Extensions... 


Adobe Online Forums 


Deactivate... 


2 Inthe Adobe Application Manager dialog box, select the updates you want to 
install, and then click Download And Install Updates to install them. 


® Note: To set your preferences for future updates, choose Help > Updates, and then click 
Preferences in the Adobe Application Manager. Select how often you want Adobe Application 
Manager to check for updates, for which applications, and whether to download them 
automatically. Click OK to accept the new settings. 


40 LESSON 1 Getting Acquainted 


Review Questions 


u F&F WwW N 


What is the Stage? 

What’s the difference between a frame and a keyframe? 
What’s a hidden tool, and how can you access it? 

Name two methods to undo steps in Flash and describe them. 


How can you find answers to questions you have about Flash? 


Review Answers 


1 


The Stage is the area viewers see when a movie is playing in Flash Player or a Web 
browser. It contains the text, images, and video that appear on the screen. Objects that 
you store on the Pasteboard outside of the Stage do not appear in the movie. 


A frame is a measure of time on the Timeline. A keyframe is represented on the 
Timeline with a circle and indicates a change in content on the Stage. 


Because there are too many tools to display at once in the Tools panel, some tools are 
grouped, and only one tool in the group is displayed. (The tool you most recently used 
is the one shown.) Small triangles appear on tool icons to indicate that hidden tools 
are available. To select a hidden tool, click and hold the tool icon for the tool that is 
shown, and then select the hidden tool from the menu. 


You can undo steps in Flash using the Undo command or the History panel. To undo 
a single step at a time, choose Edit > Undo. To undo multiple steps at once, drag the 
slider up in the History panel. 


Choose Help > Flash Help to browse or search Flash Help for information about using 
Flash CS5 and ActionScript 3.0. Choose Help > Flash Support Center or visit www. 
adobe.com to see tutorials, tips, and other resources for Flash users. 
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WORKING WITH GRAPHICS 


Lesson Overview 


In this lesson, you'll learn how to do the following: 


This lesson will take approximately 90 minutes to complete. If needed, 
remove the previous lesson folder from your hard drive and copy the 


Draw rectangles, ovals, and other shapes 
Understand the difference between drawing modes 
Modify the shape, color, and size of drawn objects 
Understand fill and stroke settings 

Make symmetrical and decorative patterns 

Create and edit curves 

Apply gradients and transparencies 

Group elements 


Create and edit text 


Lesson02 folder onto it. 


arden Court Cafe 


CoE Taste the Difference d 
ae) BE 


x Sor 3 


You can use rectangles, ovals, and lines to create 
interesting, complex graphics and illustrations in 
Flash. Edit their shapes and combine them with gradi- 
ents, transparencies, text, and filters for even greater 
possibilities. 
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@ Note: Each color has 
a hexadecimal value in 
Flash, HTML, and many 
other applications. Light 
gray is #999999, white 

is #FFFFFF, and black is 
#000000. You may find 
it handy to memorize 
the values for the colors 
you use most often. 


Getting Started 


Start by viewing the finished movie to see the animation you'll be creating in this 
lesson. 


1 Double-click the 02End.swf file in the Lesson02/02End folder to view the final 
project. 


"N 


The project is a simple static illustration for a banner ad. This illustration is for 
Garden Court Cafe, a fictional company that’s promoting its store and coffee. In 
this lesson, you'll draw the shapes, modify them, and learn to combine simple 
elements to create more complex visuals. You won't create any animation just 
yet. After all, you must learn to walk before you can run! And learning to create 
and modify graphics is an important step before doing any Flash animation. 


2 Choose File > New. In the New Document dialog box, choose ActionScript 3.0. 


3 In the Properties inspector, make the Stage size 700 pixels by 200 pixels and 
make the color of the Stage a light brown (#CC9966). 


4 Choose File > Save. Name the file 02_workingcopy.fla and save it in the 02Start 
folder. Saving your file right away is a good working habit and ensures that your 
work won't be lost if the application or your computer crashes. 


Understanding Strokes and Fills 


Every graphic in Flash starts with a shape. A shape is made of two components: the 
fill, or the insides of a shape, and the stroke, or the outlines of the shape. If you can 
always keep these two components in mind, you’re well on your way to creating 
beautiful and complicated visuals. 


The fill and the stroke are independent of each other, so you can modify or delete 
either without affecting the other. For example, you can create a rectangle with a 
blue fill and a red stroke, and then later change the fill to purple and delete the red 
stroke entirely. All you'll be left with is a purple rectangle without an outline. You 
can also move the fill or stroke independently, so if you want to move the entire 
shape, make sure that you select both its fill and stroke. 
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Creating Shapes 


Flash includes several drawing tools, which work in different drawing modes. Many 
of your creations will begin with simple shapes such as rectangles and ovals, so it’s 
important that you’re comfortable drawing them, modifying their appearance, and 
applying fills and strokes. 


You'll begin by drawing the cup of coffee. 


Using the Rectangle tool 


The coffee cup is essentially a cylinder, which is a rectangle with an oval at the top 
and an oval at the bottom. You'll start by drawing the rectangular body. It’s useful 
to break down complicated objects into their component parts to make drawing 
them easier. 


1 Inthe Tools panel, select the Rectangle tool ( ). Make sure the Object 
Drawing mode icon ( © ) is not selected. 


2 Choose a stroke color ( í ) and a fill color( Kad )from the bottom of the Tools 
panel. Choose #663300 (dark brown) for the stroke and #CC6600 (light brown) 
for the fill. 


3 On the Stage, draw a rectangle that is a little taller than it is 
wide. You'll specify the exact size and position of the rectangle 
in step 6. 


4 Select the Selection tool ( * ). 


5 Drag the Selection tool around the entire rectangle to select its 
stroke and its fill. When a shape is selected, Flash displays it 
with white dots. You can also double-click a shape, and Flash 
will select both the stroke and fill of the shape. 


6 Inthe Properties inspector, type 130 for the ~z POSITION AND SIZE 
width and 150 for the height. Press Enter/ X: 302.95 Y: 39.00 
Return to apply the values. ëS W: 130.00 H: 150.00 
Using the Oval tool 
Now you'll create the opening at the top and the rounded bottom. 
1 Inthe Tools panel, click and hold your mouse = [Gl Rectangle Tool (R) 
cursor over the Rectangle tool to access the @ Onl Tool (0) fh 


il Rectangle Primitive Tool (R) 
Oval Primitive Tool (O) 
O PolyStar Tool 


hidden tools. Choose the Oval tool. 


ERE T 
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@ Note: Flash applies 
the default fill and 
stroke to the rectangle 
and oval, which are 
determined by the 
last fill and stroke you 
applied. 


Make sure the Snap to Objects option ( W ) is enabled. This option forces 
shapes that you draw on the Stage to snap to each other to ensure lines and 
corners connect to each other. 


Click inside the rectangle and drag across it to make an oval inside the 
rectangle. The Snap to Objects option makes the sides of the oval connect to the 
sides of the rectangle. 


Draw another oval near the bottom of the rectangle. 


Making Selections 


To modify an object, you must first be able to select different parts of it. In Flash, 


you can make selections using the Selection, Subselection, or Lasso tool. Typically, 


you use the Selection tool to select an entire object or a section of an object. The 


Subselection tool lets you select a specific point or line in an object. With the Lasso 
tool, you can make a freeform selection. 


Selecting strokes and fills 


Now you'll make the rectangle and ovals look more like a coffee cup. You'll use the 


Selection tool to delete unwanted strokes and fills. 


1 
2 


In the Tools panel, select the Selection tool ( } ). 
Click the fill above the top oval to select it. 

The shape above the top oval becomes highlighted. 
Press the Delete key. 

The shape is deleted. 
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4 Select each of the three line segments above the top oval and 
press the Delete key. 


The individual strokes are deleted, leaving the top oval 


connected to the rectangle. 
5 Now select the fill and the strokes below the bottom oval, as @ Note: Hold down 
the Shift key when 
making selections to 
select multiple fills or 
strokes together. 


well as the inside arc at the bottom of the cup, and press the 
Delete key. 


The remaining shape appears as a cylinder. 


Editing Shapes 


When drawing in Flash, you'll often start with the Rectangle and Oval tools. But to 
create more complex graphics, you'll use other tools to modify those base shapes. 
The Free Transform tool, the Copy and Paste commands, and the Selection tool can 
help transform the plain cylinder into a coffee cup. 


Using the Free Transform tool 


The coffee cup will look more realistic if you taper the bottom rim. You'll use the 
Free Transform tool to change its overall shape. With the Free Transform tool, you 
can change an object’s scale, rotation, or skew (the way it is slanted), or distort an 
object by dragging control points around a bounding box. 


1 Inthe Tools panel, select the Free Transform tool ( *4 ). 


2 Drag the Free Transform tool around the cylinder on the 
Stage to select it. 


Transformation handles appear on the cylinder. 


3 Press Ctrl/Command+Shift as you drag one of the lower 
corners inward. Holding these keys while dragging lets you 
move both corners the same distance simultaneously. 


4 Click outside the shape to deselect it. 


The bottom of the cylinder is narrow, and the top is wide. It 
now looks more like a coffee cup. 


® Note: If you press Alt or Option while moving one of the control points, the selected object 
is scaled relative to its transformation point, represented by the circle icon. You can move the 
transformation point anywhere, even outside the object. Press Shift to constrain the object 
proportions. Press Ctrl/Command to deform the object from a single control point. 
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Using Copy and Paste 


Use Copy and Paste commands to easily duplicate shapes on the Stage. You'll make 
the surface level of the coffee by copying and pasting the top rim of the coffee cup. 


1 Hold down the Shift key and select the top arc and bottom 
arc of the coffee cup opening. 


2 Choose Edit > Copy (Ctrl/Command+C). The top strokes of 
the oval are copied. 


3 Choose Edit > Paste in Center (Ctrl/Command+V). 
A duplicate oval appears on the Stage. 

4 Inthe Tools panel, select the Free Transform tool. 
Transformation handles appear on the oval. 


5 Press the Shift and the Alt/Option key as you drag on the 
corners inward. Make the oval about 10 percent smaller. 
Pressing the Shift key lets you change the shape uniformly so 
the oval maintains its aspect ratio. Pressing the Alt/Option 
key changes the shape from its transformation point. 


6 Select the Selection tool. 


7 Drag the oval over the rim of the coffee cup so it overlaps the 
front lip. 


8 Click outside the selection to deselect the oval. 
9 Select the lower part of the smaller oval and delete it. 


Your coffee cup now is filled with coffee! 


Changing shape contours 


With the Selection tool, you can push and pull lines and corners to change the 
overall contours of any shape. It’s a fast and intuitive way of working with shapes. 


1 In the Tools panel, select the Selection tool. 
2 Move your mouse cursor close to one of the sides of the coffee cup. 


A curved line appears near your cursor, indicating that you can change the 
curvature of the stroke. 


3 Click and drag the stroke outward. 


The sides of the coffee cup bend, giving the coffee 
cup a slight bulge. 
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4 Click and drag the other side of the coffee cup outward slightly. @ Note: Hold down 
the Alt/Option key 
while dragging the 
sides of a shape to add 
anew corner. 


The coffee cup now has a more rounded body. 


Changing strokes and fills 


If you want to change the properties of any stroke or fill, you can use the Ink Bottle 
tool or the Paint Bucket tool. 


1 Inthe Tools panel, select the Paint Bucket tool (al ). 


2 Inthe Properties inspector, choose a darker brown color (#663333). 


E E Alpha 1002 @ 


3 Click the top surface of the coffee that is inside the cup. @ Note: If your Paint 
Bucket tool changes the 
fill in surrounding areas, 
there may be a small 
gap that allows the fill 
to spill over. Close the 
gap, or at the bottom of 
the Tools panel, choose 
to close different gap 
sizes for your Paint 
Bucket tool. 


The fill of the top oval changes to the darker brown color. 


4 Inthe Tools panel, select the Ink Bottle tool (iE) that is hidden under the Paint 
Bucket tool. 


5 In the Properties inspector, choose a darker brown color (#330000). 
6 Click the top stroke above the surface of the coffee. 


The stroke around the surface of the coffee changes to a darker brown color. 


@ Note: You can also select a stroke or a fill and change its color in the Properties inspector 
without using the Paint Bucket or Ink Bottle tool. 
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Flash Drawing Modes 


Flash provides three drawing modes that determine how objects interact with each other on the Stage and how 
you can edit them. By default, Flash uses merge drawing mode, but you can enable object drawing mode or use 
the Rectangle Primitive or Oval Primitive tool to use the primitive drawing mode. 


Merge drawing mode 


In this mode, Flash merges drawn shapes, such as rectangles and ovals, where they overlap, so that multiple 
shapes appear to be a single shape. If you move or delete a shape that has been merged with another, the over- 
lapping portion is permanently removed. 


Object drawing mode 


In this mode, Flash does not merge drawn objects; they remain distinct and separate, even when they overlap. 
To enable object drawing mode, select the tool you want to use, and then click the Object Drawing icon in the 
options area of the Tools panel. 


To convert an object to shapes (merge drawing mode), select it and press Ctrl/Command+B. To convert a shape 
to an object (object drawing mode), select it and choose Modify > Combine Objects > Union. 


Primitive drawing mode 


When you use the Rectangle Primitive tool or the Oval Primitive tool, Flash draws the shapes as separate objects. 
Unlike regular objects, however, you can modify the corner radius of rectangle primitives as well as the start and 
end angle, and the inner radius of oval primitives using the Properties inspector. 
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Using Gradient and Bitmap Fills 


The fill is the interior of the drawn object. Currently, you have a solid tan color, but 
you can also have a gradient or a bitmap image (such as a JPEG file) as a fill, or you 
can specify that the object has no fill at all. 


In a gradient, one color gradually changes into another. Flash can create linear 
gradients, which change color horizontally, vertically, or diagonally; or radial gradi- 
ents, which change color moving outward from a central focal point. 


For this lesson, you'll use a linear gradient fill to add three-dimensionality to the 
coffee cup. To give the appearance of a top layer of foaming cream, you'll import a 
bitmap image to use as the fill. You can import a bitmap file in the Color panel. 


Creating gradient transitions 


You'll define the colors you want to use in your gradient in the Color panel. By 
default, a linear gradient moves from one color to a second color, but you can use 
up to 15 color transitions in a gradient in Flash. A color pointer determines where 
the gradient changes from one color to the next. Add color pointers beneath the 
gradient definition bar in the Color panel to add color transitions. 


You'll create a gradient that moves from tan to white to dark tan on the surface of 
the coffee cup to give it a rounded appearance. 


1 Choose the Selection tool. Select the fill that represents the front surface of the 
coffee cup. 


2 Open the Color panel (Window > Color). In the Color panel, choose the Fill 
color icon and select Linear gradient. The front surface of the coffee cup is filled 
with a color gradient from left to right. 


coon [SwareHes [Pes] 
| 
A None 
= Solid color 


ZE 
Radial gradient | 
Bitmap fill 


# [000000 A: 100% 


— O) 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 51 


® Note: To delete a 
color pointer from the 
gradient definition bar, 
simply drag it off the 
bar. 


Select the color pointer on the left of the color gradient in the Color panel (the 
triangle above it turns black when selected), and then type FFCCCC in the Hex 
value field to specify a light tan color. Press Enter/Return to apply the color. You 
can also choose a color from the color picker or double-click the color pointer 
to choose a color from the color swatches. 


Select the far-right color pointer, and then enter B86241 for a dark tan color. 
Press Enter/Return to apply the color. 


2 BS Linear gradient | v 
rea | Flow: EOE 
t a5 O Linear RGB 


+ 


B86241 A: 100% 


The gradient fill for the coffee cup gradually changes from light tan to dark tan 


across its surface. 
Click beneath the gradient definition bar to create a new color pointer. 


pp 


+ 


Drag the new color pointer to the middle of the gradient. 


Select the new color pointer, and then type FFFFFF in the Hex value field to 
specify white for the new color. Press Enter/Return to apply the color. 


The gradient fill for the coffee cup gradually changes from light tan to white to 
dark tan. 


# | FFFFFF A: 100% 


— 


Deselect the fill on the Stage by clicking elsewhere on the Stage. Choose the 
Paint Bucket tool and make sure the Lock Fill option ( # ) at the bottom of the 
Tools panel is deselected. 


The Lock Fill option locks the current gradient to the first shape to which it 
was applied so that subsequent shapes extend the gradient. You'll want a new 
gradient for the back surface of the coffee cup, so the Lock Fill option should be 
deselected. 
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9 With the Paint Bucket tool, select the back surface of the 


coffee cup. 


The gradient is applied to the back surface. \ 


Using the Gradient Transform tool 


In addition to choosing colors and positioning the color pointers for a gradient, 


you can adjust the size, direction, or center of a gradient fill. To squeeze the gradi- 


ent in the front surface and reverse the gradient in the back surface, you'll use the 


Gradient Transform tool. 


1 


Select the Gradient Transform tool. (The Si} Free Transform Tool (Q) EI 


Gradient Transform tool is grouped with = (Si Gradient Transform Tool (F) 


the Free Transform tool.) 
Click the front surface of the coffee cup. Transformation handles appear. 


Drag the square handle on the side of the bounding box inward to squeeze the 
gradient tighter. Drag the center circle to move the gradient to the left so the 
white highlight is positioned slightly left of center. 


Now click the back surface of the coffee cup. Transformation handles appear. 


Drag the round handle on the corner of the bounding box to rotate the gradient 
180 degrees so the gradient fades from dark tan to the left to white to light tan 
on the right. 


The coffee cup now has more realism because the shadows and highlights make 
it appear that the front surface is convex and the back surface is concave. 


@ Note: Move the 
center circle to change 
the center of the 
gradient; drag the arrow 
circle to rotate the 
gradient; or drag the 
arrow in the square to 
stretch the gradient. 
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Adding a bitmap fill 


You'll make this cup of coffee a little fancier by adding a frothy layer of cream. A 
JPEG image of foam will be used as a bitmap fill. 


1 Select the top surface of the coffee with the Selection tool. 
2 Open the Color panel (Window > Color). 
3 Select Bitmap fill. 


7 None 
v Solid color 
Linear gradient 
Radial gradient 


663333 


A 
C 


4 Inthe Import to Library dialog box, navigate to the coffeecream.jpg file in the 
Lesson02/02Start folder. 


@ Note: You can 5 Select the coffeecream.jpg file and click Open. 

also use the Gradient 

Transform tool to The top surface of the coffee fills with the foam image. The 
change the way a cup of coffee is complete! Rename the layer containing your 
bitmap fill is applied. completed drawing coffee. All that’s left to do is to add 


some bubbles and hot steam. 


Grouping objects 


Now that you're finished creating your cup of coffee, you can make it into a single 
group. A group holds together a collection of shapes and other graphics to pre- 
serve their integrity. When grouped, you can move the coffee cup as a unit without 
worrying that it may merge with underlying shapes. Use groups to organize your 
drawing. 


1 Select the Selection tool. 


2 Select all the shapes that make up the cup of coffee. 
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3 Choose Modify > Group. 


The cup of coffee is now a single group. When you select it, 
a blue outline indicates its bounding box. 


4 Ifyou want to change any part of the cup of coffee, double- 
click the group to edit it. 


Notice that all the other elements on the Stage | GE sene1 [E] Group 
dim, and the top horizontal bar above the Stage 

displays Scene 1 Group. This indicates that you are now in a particular group 
and can edit its contents. 


5 Click the Scene 1 icon in the horizontal bar at the top of the Stage, or double- @ Note: To change 


click an empty part of the Stage, and return to the main scene. a group back into its 
component shapes, 


choose Modify > 
Ungroup (Shift+Ctrl+G 


Making Patterns and Decorations [Windows] or 


Shift+Command+G 


You can make intricate patterns with the Deco tool ( # ), which has many new [mach 


brushes in Flash Professional CS5. Many options allow you to quickly and easily 
build symmetrical designs, grids, or branching-type flourishes. In this lesson, you'll 
use the Deco tool to create symmetrical fizzy shapes and dashed lines to give the 
banner ad more punch, and floral decorations to adorn the edges. 


Creating a symbol for a pattern 


Before you can use the Deco tool’s symmetry brush, you must create a symbol to be 
used as the base shape that will repeat. You'll learn more about symbols in the next 
lesson. 


1 From the top menu, choose Insert > New Symbol. 


2 Inthe Create New Symbol dialog box that appears, enter line for the name and 
choose the Graphic Type symbol. Click OK. 


Create New Symbol 


Name: [in | 
Type: | Graphic |v Cancel 


Folder: Library root 


Advanced »* 


3 Flash immediately takes you to symbol editing mode. [e E sene 1 E) line 
Notice the top horizontal bar above the Stage, which 
indicates you are currently editing the symbol called line. You will now draw a 
line for this symbol. 
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4 Select the Line tool ( | ` h. 


5 Select a brown color for the stroke and Hairline for the Stroke Style. 


PROPERTIES 


N Line Tool 


~~ FILL AND STROKE 
ma | ot) 
Stroke: —— 
Style: 7 
Scale: O Hinting 
Cap: lv 
Join: @|¥ Miter: 3,00 


A hairline stroke maintains a uniform thin thickness regardless of how large or 
small you scale it. 


6 Hold down the Shift key while you draw a line across the center of the Stage 
where you see a crosshair representing the center point of your symbol. Make 
the line about 25 pixels high. 


7 Click on Scene 1 on the horizontal bar above the Stage to return to the main 
Timeline. Your new symbol called line has been created and is stored in your 
Library panel for later use. 


2 items p 


] 
Name =| Li 
[Æ] coffeecream.jpg = 
[E] line 
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Using the Deco tool Symmetry Brush 


You'll create a star shape with the Deco tool. 


1 


On the Timeline, insert a new layer and name it coffee aroma. You'll draw your 


symmetrical shapes in this layer. 


In the toolbar, select the Deco tool ( # ). 


In the Properties inspector, choose the Symmetry Brush option. 


PROPERTIES 


YY Deco Too! 


~v DRAWING EFFECT 


Vine Fill gl 
| Grid Fill | 
wee) v Symmetry Brush | sarge 
3D Brush | 


Building Brush 
Decorated Brush 

| Fire Animation *] 
Flame Brush 


vy ADVA} 


Click the Edit button next to Module to change the shape that will repeat. 


In the Select Symbol dialog box, choose the line symbol. Click OK. 


Select Symbol 


E line 


Cancel 


Under the Advanced Options, choose Rotate Around. 


With these Deco tool options, you can create a repeating pattern of the line 


symbol that is symmetrical around a point. A green guide appears on the Stage 


that shows the center point, the main axis, and a secondary axis that determines 


how frequently the symbol is repeated. 


s7 ADVANCED OPTIONS 


Reflect Across Line | 
Reflect Across Point 


v Rotate Around =f. 


Grid Translation 


Click on the Stage to place your symbol and, while keeping your mouse button 


depressed, drag it around the green guides until you get the radial pattern you 


desire. The initial line should be vertical. 
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8 Drag the secondary green axis closer to the main axis to increase the repetitions. 


= 
y + 
\ \\ p 


9 When you're done, select the Selection tool to exit the Deco tool. 


The resulting pattern is a group consisting of a number of line symbols. 


WIZ, 
Aligning objects 


Now you'll create a center bubble for the radiating lines. The bubble should be 
located exactly in the center of the radiating lines, and for that, you can turn to the 
Align panel. The Align panel, as you might guess, aligns any number of selected 
objects horizontally or vertically. It can also distribute objects evenly. 


1 Select the Oval tool. 


2 Select a brown color for the stroke and no fill. To select no fill, choose the color 
box that has a diagonal red line through it. Select Hairline for Stroke Style. 


#D6D6D6 Alpha:% 100 
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3 Select the coffee aroma layer. Hold down the Shift key while you draw a small 


circle on the Stage. 


4 Now select the Selection tool. 


5 Drag the Selection tool over both the star-shaped group and the newly drawn 


oval. You might have to lock the lower layer so you don’t accidentally select the 
shapes in the lower layers. 


DA 


WN O 


6 Open the Align panel (Window > Align). 


7 Click on the Align horizontal center button. 


The star-shaped group and the oval become aligned horizontally. 


ALIGN 

Align: 

B EN a Eth 
Distribut Align horizontal center 
po 

Match size: Space: 
Bim 6 i 

O Align to stage 


Click on the Align vertical center button. 


The star-shaped group and the oval become aligned vertically. 


ALIGN 


Align: 

aad F a) Ho 
Distribute: 

F&a Hi 
Match size: Space: 
2b 2h 


O Align to stage 


Align vertical center | 
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Breaking apart and grouping objects 


You used the Deco tool to create the group of radiating lines and the Align panel 


to center the bubble with the lines. Now you'll group the fizzy shape into a single 
entity. To do so, you'll break apart the group of radiating lines and regroup them 


with the oval. 


1 With the Selection tool, drag a selection around the entire star so that all the 


lines and the circle are selected. 


2 Choose Modify > Break Apart. 


The group of lines breaks into its component parts and becomes a collection of 


line symbols. 


~ A 
Fras, 
“IS 


3 Choose Modify > Break Apart one more time. 


The collection of line symbols breaks into its component parts and becomes a 


collection of strokes. 


4 Choose Modify > Group. 


The lines and center circle become a single group. 
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5 Copy and paste the group to create multiple bubbles just over the coffee cup. 
Use the Transform tool to scale the bubbles to different sizes. 


Using the Deco tool Decorated Brush 


-X 


Now you'll explore the Deco tool’s Decorated Brush, which creates decorated 


borders and complex line patterns. 


1 
2 


In the toolbar, select the Deco tool ( #7 ). 


In the Properties inspector, choose the Decorated Brush option. 


PROPERTIES 


Fad Deco Tool 


vy DRAWING EFFECT 


Vine Fill 

Grid Fill 

Symmetry Brush 

3D Brush 
Building Brush 

v Decorated Brush 
Fire Animation 
Flame Brush 
Flower Brush 


s7 ADVA! 


3 Inthe Advanced Options, select Dashed Line. Choose a dark brown color 
for the Pattern color and leave Pattern size and Pattern width at their default 


values. 


x7 ADVANCED OPTIONS 


1: Step Wave 
L_§ 2: Wave 


v 3: Dashed Line h 


4: Line Dot 
5: Zig Zag 
6: Mayan 
7: Circles 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 61 


@ Note: The Line 

and Pencil tools can 
also create dashed 
lines and different 

line patterns, but they 
can’t make repeated 
complex patterns 

like the Deco tool 

can. In the Properties 
inspector, click the Edit 
Stroke Style button to 
customize the stroke for 
dashed lines. 


4 On the Stage, draw several curvy lines above the coffee cup. 


The Decorated Brush creates dashed lines giving your coffee cup a little 
more life! 


Using the Deco tool Flower Brush 
Now you'll create flower patterns to decorate the borders of the banner ad. 
1 Inthe toolbar, select the Deco tool ( # ). 


2 In the Properties inspector, choose the Flower Brush option. 


PROPERTIES 


2 Deco Tool 


x7 DRAWING EFFECT 
Vine Fill 
Grid Fill 
Y ADV Symmetry Brush 
3D Brush 
Building Brush 
Decorated Brush 
Fire Animation 
Flame Brush 
v Flower Brush [Ss 
Lightning Brush 
Particle System 
Smoke Animation 
Tree Brush 


ee | 


3 Inthe Advanced Options, select Garden flower. Select the Branch option and 
leave the colors and sizes at their default values. 


<7 ADVANCED OPTIONS 


v Garden flower |. 
Rose 
Poinsettia 
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4 Draw a swooping branch of flowers across the lower portion of the Stage. 


The flowers, leaves, fruits, and branches are generated repeatedly as you move 
your brush over the Stage. 


5 Select all the flowers, leaves, fruits and branches. Choose Modify > Group. 


The flower decorations are combined into a single group so you can move or 
modify them as a unit. 


Creating Curves 


You’ve used the Selection tool to pull and push on the edges of shapes to intuitively 
make curves. For more precise control, you can use the Pen tool ( ¢, ). 


Using the Pen tool 
Now you'll create a soothing, wave-like background graphic. 
1 Choose Insert > Timeline > Layer, and name the new layer dark brown wave. 


2 Drag the layer to the bottom of the layer stack. 


@ coffee aroma 
q coffee cup 


Lock all the other layers. 
In the Tools panel, select the Pen tool ( $, ). 


Set the Stroke color to dark brown. 


a u A U 


Begin your shape by clicking on the Stage to establish the first anchor point. 
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7 Click on another part of the Stage to indicate the next anchor point in your 
shape. When you want to create a smooth curve, click and drag with the 
Pen tool. 


A handle appears from the anchor point, indicating the curvature of the line. 


oo > 
8 Continue clicking and dragging to build the outline of the wave. Make the width 
of the wave wider than the Stage. 


9 Close your shape by clicking on the first anchor point. Don’t worry about 
making all the curves perfect. It takes practice to get used to the Pen tool. You'll 
also have a chance to refine your curves in the next part of the lesson. 


10 Select the Paint Bucket tool. 
11 Set the Fill color to a dark brown. 


12 Click inside the outline you just created to fill it with color and delete the stroke. 
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Editing curves with the Selection and Subselection tools 


Your first try at creating smooth waves probably won’t be very good. Use the 
Selection tool or the Subselection tool to refine your curves. 


1 Choose the Selection tool. 


2 Hover over a line segment and look at the curve that appears near your cursor. 
This indicates that you can edit the curve. If a corner appears near your cursor, 
this indicates that you can edit the vertex. 


3 Drag the curve to edit its shape. 


4 Inthe Tools panel, select the Subselection tool ( È ). 
5 Click on the outline of the shape. 


6 Drag the anchor points to new locations or move the handles to refine the 
overall shape. 


Deleting or adding anchor points 
Use the hidden tools under the Pen tool to delete or add anchor points as needed. 
1 Click and hold on the Pen tool to access the hidden tools under it. 


m Pen Tool (P) 
y Add Anchor Point Tool (=) 


4 Delete Anchor Point Tool (-) 
N Convert Anchor Point Tool (C) 


Select the Delete Anchor Point tool ( & ). 
Click on an anchor point on the outline of the shape to delete it. 


Select the Add Anchor Point tool ( * ). 


uu F&F W N 


Click on the curve to add an anchor point. 
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Creating Transparencies 


Next, you'll create a second wave to overlap the first wave. You'll make the sec- 

ond wave slightly transparent to create more overall depth. Transparency can be 
applied to either the stroke or the fill. Transparency is measured as a percentage 
and is referred to as alpha. An alpha of 100% indicates that a color is totally opaque, 
whereas an alpha of 0% indicates that a color is totally transparent. 


Modifying the alpha value of a fill 
1 Select the shape in the dark brown wave layer. 
2 Choose Edit > Copy. 


3 Choose Insert > Timeline > Layer and name the new layer light brown wave. 


riweune [oumu | wonow eprom | 
sagn 5 
q coffee aroma + BY 
q coffee cup . mY 


. 
= light brown wave Se 
q dark brown wave . 


4 Choose Edit > Paste in Place (Ctrl/Command+Shift+V). 


The Paste in Place command puts the copied item in the exact same position 
from where it was copied. 


5 Choose the Selection tool and move the pasted shape slightly to the left or to the 
right so the crests of the waves are somewhat offset. 


6 Select the fill of the shape in the light brown wave layer. 


@ Note: You can 7 Inthe Color panel (Window > Color), set the fill color to a slightly different 
also change the brown hue (CC6666), and then change the Alpha value to 50%. 

transparency of a shape 

from the Properties 

inspector by clicking 

the Fill Color icon and 

changing the Alpha 

value in the pop-up 

color menu. 
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The color swatch at the bottom of the Color panel previews your newly selected 
color. Transparencies are indicated by the gray pattern that appears behind the 
color swatch. 


COLOR 
7 
WE] 


CC6666 


Matching the color of an existing object 


If you want to match a color exactly, you can use the Eyedropper tool ( 7 ) to 
sample a fill or a stroke. After you click on a shape with the Eyedropper tool, Flash 
automatically provides you with the Paint Bucket tool or the Ink Bottle tool with 
the selected color and associated properties that you can apply to another object. 


1 Inthe Tools panel, choose the Eyedropper tool. 
2 Click on the fill of the shape in the dark brown wave layer. 
Your tool automatically changes to the Paint Bucket with the sampled fill color. 


3 Click on the shape in the light brown wave layer. 


The fill in the light brown wave layer changes to match that of the one in the 
dark brown wave layer. Undo this step to return to the two different colored 


wave shapes. 
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Creating and Editing Text 


Finally, let’s add text to complete this illustration. Flash has two text options, 
Classic Text and a new feature called Text Layout Framework (TLF) Text. You'll 
learn more about TLF Text in Lesson 7. For this project, you'll use the simpler 
Classic Text option. 


When you create text on the Stage and publish your project, Flash automatically 
includes all the necessary fonts to display the text correctly. That means you don’t 
have to worry about your audience having the required fonts to see the text as you 
intended it. 


Using the Text tool 

1 Select the top layer. 

2 Choose Insert > Timeline > Layer and name the new layer text. 
3 Choose the Text tool ( T ). 
4 


In the Properties inspector, select Classic Text and choose Static Text. 


PROPERTIES 
Text Tool 
Classic Text ly 


Static Text RA IIRA 


5 Under the Character options, choose a font, style, size, and color. 


6 Under the Paragraph options, you have additional choices for formatting the 
text such as justification or spacing. 


7 Click on the Stage and begin typing. Enter Garden Court Cafe Taste the 
Difference. Alternately, you can click and drag out a text box to define the 
maximum width of your text. 


arden Court Cafe 
te Wa Taste the Difference 


u 


8 Exit the Text tool by choosing the Selection tool. 
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Review Questions 


A WwW N 


What are the three drawing modes in Flash, and how do they differ? 
How can you draw a perfect circle using the Oval tool? 
When would you use each of the selection tools in Flash? 


What does the Align panel do? 


Review Answers 


1 


The three drawing modes are merge drawing mode, object drawing mode, and 
primitive drawing mode. 


e In merge drawing mode, shapes drawn on the Stage merge to become a single 
shape. 


e In object drawing mode, each object is distinct and remains separate, even when it 
overlaps another object. 


e In primitive drawing mode, you can modify the angles, radius, or corner radius of 
an object. 


To draw a perfect circle, hold down the Shift key as you drag the Oval tool on the 
Stage. 


Flash includes three selection tools: the Selection tool, the Subselection tool, and the 
Lasso tool. 


e Use the Selection tool to select an entire shape or object. 
e Use the Subselection tool to select a specific point or line in an object. 
e Use the Lasso tool to draw a freeform selection area. 


The Align panel aligns any number of selected elements horizontally or vertically and 
can distribute elements evenly. 
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CREATING AND 
EDITING SYMBOLS 


Lesson Overview 
In this lesson, you'll learn how to do the following: 
e Import Illustrator and Photoshop artwork 
e Create new symbols 
e Edit symbols 
e Understand the difference between symbol types 
e Understand the difference between symbols and instances 
e Use rulers and guides to position objects on the Stage 
e Adjust transparency and color 
e Apply blending effects 
e Apply special effects with filters 
e Position objects in 3D space 
This lesson will take about an hour and a half to complete. If needed, 


delete the previous lesson folder from your hard drive and copy the 
Lesson03 folder onto it. 


[03workinacopy fa ——— ě v] a Œ 


=| Linkage 
background.psd Assets 
characters 


hero 
robot 


46 ai I > 


Symbols are reusable assets that are stored in your 
Library panel. The movie clip, graphic, and button 
symbols are three types of symbols that you will be 
creating and using often for special effects, animation, 
and interactivity. 


Getting Started 


Start by viewing the final project to see what you'll be creating as you learn to work 
with symbols. 


1 Double-click the 03End.swf file in the Lesson03/03End folder to view the final 
project in Flash. 


The project is a static illustration of a cartoon frame. In this lesson, you'll use 
Illustrator graphic files, imported Photoshop files, and symbols to create an 
attractive static image with interesting effects. Learning how to work with 
symbols is an essential step to creating any animation or interactivity. 


2 Close the 03End.swf file. 
3 Choose File > New. In the New Document dialog box, choose ActionScript 3.0. 


4 Inthe Properties inspector, click the Edit button next to the Size options to 
change the Stage to 600 pixels wide by 450 pixels high. 


5 Choose File > Save. Name the file 03_workingcopy.fla and save it in the 03Start 
folder. 
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Importing Illustrator Files 


As you learned in Lesson 2, you can draw objects in Flash using the Rectangle, 
Oval, and other tools. However, for complex drawings, you may prefer to create the 
artwork in another application. Adobe Flash Professional CS5 supports a variety 

of graphic formats, including Adobe Illustrator files, so you can create original 
artwork in that application and then import it into Flash. 


When you import an Illustrator file, you can choose which layers in the file to 
import and how Flash should treat those layers. You'll import an Illustrator file that 
contains all the characters for the cartoon frame. 


1 Choose File > Import > Import to Stage. 

2 Select the characters.ai file in the Lesson03/03Start folder. 
3 Click Open. 
4 


In the Import to Stage dialog box, make sure all layers are selected. A check 
mark should appear in the check box next to each layer. 


f Import "characters.ai" to Stage 


Select Illustrator Artboard: | 1-"Artboard 1" E) 


Check Illustrator layers to import: Layer import options for "hero": 
M Y [A]hero 
v [F] <Group> 


<Compound Path> 


C Import as bitmap 


E <Compound Path>_1 O Create movie clip 


|<] <Compound Path>_2 Instance name: 


F] <Compound Path>_3 


3 oe feel 
Registration: 953 


<Compound Path>_4 


<Compound Path>_5 


<Compound Path>_6 


=] <Compound Path>_7 
<Compound Path>_8 


<Compound Path>_9 
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<Compound Path>_10 
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If you only want to import certain layers, you can deselect the layers you want 
to omit. 


5 Choose Flash Layers from the Convert layers to menu, and then select Place 
objects at original position. Click OK. 


Convert layers to: | Flash Layers i 


Place objects at original position 
[C] Set stage size to same size as Illustrator artboard (612 x 792) 
C Import unused symbols 


C] Import as a single bitmap image 
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@ Note: You can select 
any object displayed in 
your Illustrator file and 
choose to import it as 
a symbol or a bitmap 
image. In this lesson, 
you'll just import the 
Illustrator graphic and 
take the extra step 

of converting it to a 
symbol so you can see 
the entire process. 


Flash imports the Illustrator graphics, and all the layers from the Illustrator file 
also appear in the Timeline. 


@ robot . E 


Select Illustrator Artboard: | 1 -"Artboard 1" iE) 


Check Illustrator layers to import: Layer import options for "hero": 
M v [A] hero 
v [Ñ] <croup> 


<Compound Path> 


C Import as bitmap 


<Compound Path>_1 M Create movie clip 


<Compound Path>_2 Instance name: 


<Compound Path>_3 aoo 
Registration: 990 


<Compound Path>_4 


epepPpPPPAH 


<Compound Path>_5 


About Symbols 


A symbol is a reusable asset that you can use for special effects, animation, or 
interactivity. There are three kinds of symbols that you can create: the graphic, but- 
ton, and movie clip. Symbols can reduce the file size and download time for many 
animations because they can be reused. You can use a symbol countless times in a 
project, but Flash includes its data only once. 


Symbols are stored in the Library panel. When you drag a symbol to the Stage, 
Flash creates an instance of the symbol, leaving the original in the Library. An 
instance is a copy of a symbol located on the Stage. You can think of the symbol as 
an original photographic negative, and the instances on the Stage as prints of the 
negative. With just a single negative, you can create multiple prints. 
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Using Adobe Illustrator with Flash 


Flash Professional CS5 can import Illustrator files and automatically recognize layers, 
frames, and symbols. If you're more familiar with Illustrator, you may find it easier to design 
layouts in Illustrator, and then import them into Flash to add animation and interactivity. 


Save your Illustrator artwork in Illustrator Al format, and then choose File > Import > Import 
To Stage or File > Import > Import To Library to import the artwork into Flash. Alternatively, 
you can even copy artwork from Illustrator and paste it into a Flash document. 


Importing Layers 
When an imported Illustrator file contains layers, you can import them in any of the follow- 
ing ways: 


e Convert Illustrator layers to Flash layers 
e Convert Illustrator layers to Flash keyframes 
e Convert each Illustrator layer to a Flash graphic symbol 


e Convert all Illustrator layers to a single Flash layer 


Importing Symbols 

Working with symbols in Illustrator is similar to working with them in Flash. In fact, you can 
use many of the same symbol keyboard shortcuts in both Illustrator and Flash: Press F8 in 
either application to create a symbol. When you create a symbol in Illustrator, the Symbol 
Options dialog box lets you name the symbol and set options specific to Flash, including 
the symbol type (such as movie clip) and registration grid location. 


If you want to edit a symbol in Illustrator without disturbing anything else, double-click 
the symbol to edit it in isolation mode. Illustrator dims all other objects on the artboard. 
When you exit isolation mode, the symbol in the Symbols panel—and all instances of the 
symbol—are updated accordingly. 


Use the Symbols panel or the Control panel in Illustrator to assign names to symbol 
instances, break links between symbols and instances, swap a symbol instance with 
another symbol, or create a copy of the symbol. 


Copying and Pasting Artwork 

When you copy and paste (or drag and drop) artwork between Illustrator and Flash, 

the Paste dialog box appears. The Paste dialog box provides import settings for the 
Illustrator file you're copying. You can paste the file as a single bitmap object, or you can 
paste it using the current preferences for Al files. (To change the settings, choose Edit > 
Preferences [Windows] or Flash > Preferences [Mac].) Just as when you import the file 

to the Stage or the Library panel, when you paste Illustrator artwork, you can convert 
Illustrator layers to Flash layers. 


FXG File Format 

The FXG file format is a cross-platform graphics file format that you can also use to easily 
move your artwork between Flash and other Adobe graphics programs such as Illustrator. 
If you want to export your Flash artwork as an FXG file, choose File > Export > Export Image 
and select Adobe FXG. Import FXG artwork as you would any other external file by choos- 
ing File > Import > Import To Stage or File > Import > Import To Library. 
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It’s also helpful to think of symbols as containers. Symbols are simply containers for 
your content. A symbol can contain a JPEG image, an imported Illustrator drawing, 
or a drawing that you created in Flash. At any time, you can go inside your symbol 
and edit it, which means editing or replacing its contents. 


Each of the three kinds of symbols in Flash is used for a specific purpose. You can 
tell whether a symbol is a graphic ( E] ), button ( 5 ), or movie clip ( ) by 
looking at the icon next to it in the Library panel. 


Movie clip symbols 


Movie clip symbols are one of the most common, powerful, and flexible of symbols. 
When you create animation, you will typically use movie clip symbols. You can 
apply filters, color settings, and blending modes to a movie clip instance to enhance 
its appearance with special effects. 


Also notable is the fact that movie clip symbols contain their own independent 
Timeline. You can have an animation inside a movie clip symbol just as easily as 
you can have an animation on the main Timeline. This makes very complex anima- 
tions possible; for example, a butterfly flying across the Stage can move from left to 
right as well as have its wings flapping independently of its movement. 


Most important, you can control movie clips with ActionScript to make them 
respond to the user. For instance, a movie clip can have a drag-and-drop behavior. 


Button symbols 


Button symbols are used for interactivity. They contain four unique keyframes that 
describe how they appear when the mouse is interacting with them. However, but- 
tons need ActionScript functionality to make them do something. 


You can also apply filters, blending modes, and color settings to buttons. You'll 
learn more about buttons in Lesson 6 when you create a nonlinear navigation 
scheme to allow the user to choose what to see. 


Graphic symbols 


Graphic symbols are the most basic kind of symbol. Although you can use them for 
animation, you'll rely more heavily on movie clip symbols. 


Graphic symbols are the least flexible symbols, because they don’t support 
ActionScript and you can’t apply filters or blending modes to a graphic symbol. 
However, in some cases when you want an animation inside a graphic symbol to be 
synchronized to the main Timeline, graphic symbols are useful. 
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Creating Symbols 


In the previous lesson, you learned how to create a symbol to be used for the Deco 
tool. In Flash, there are two ways to create a symbol. The first is to have nothing on 
the Stage selected, and then choose Insert > New Symbol. Flash will bring you to 
symbol editing mode where you can begin drawing or importing graphics for your 
symbol. 


The second way is to select existing graphics on the Stage, and then choose 
Modify > Convert to Symbol (F8). Whatever is selected will automatically be placed 
inside your new symbol. 


Both methods are valid: Which you use depends on your particular workflow @ Note: When you use 
preferences. Most designers prefer to use Convert to Symbol (F8) because they the command Convert 
to Symbol, you aren't 
actually “converting” 
individual components into symbols. anything, but rather you 
are placing whatever 
you've selected inside 
graphic, and then convert the various pieces to symbols. of a symbol. 


can create all their graphics on the Stage and see them together before making the 


For this lesson, you will select the different parts of the imported Illustrator 


1 On the Stage, select the cartoon character in the hero layer. 


2 Choose Modify > Convert to Symbol (F8). 
3 Name the symbol hero and select Movie Clip for the Type. 


4 Leave all other settings as they are. The Registration indicates the registration 
point of your symbol. Leave the registration at the top-left corner. 


Convert to Symbol 
Names hero 
Type: | Movie Clip |v | Registration: Cancel 


Folder: Library root 


Advanced » 
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5 Click OK. The hero symbol appears in the Library. 


03_workingcopy.fla ly} +a g 


litem 


| Name =| Linkage 


| 
hero | 
| 


6 Select the other cartoon character in the robot layer and convert it to a movie 
clip symbol as well. Name it robot. 


You now have two movie clip symbols in your Library and an instance of each 
on the Stage as well. 


Importing Photoshop Files 


You'll import a Photoshop file for the background. The Photoshop file contains 
two layers with a blending effect. A blending effect can create special color mixes 
between different layers. You'll see that Flash can import a Photoshop file with all 
the layers intact and retain all the blending information as well. 


1 Select the top layer in your Timeline. 
2 From the top menu, choose File > Import > Import to Stage. 

3 Select the background.psd file in the Lesson03/03Start folder. 
4 Click Open. 
5 


In the Import to Stage dialog box, make sure all layers are selected. A check 
mark should appear in the check box next to each layer. 


a 


Choose the flare layer in the left window. 


7 Inthe options on the right, choose Bitmap image with editable layers styles. 
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Import "background.psd" to Stage 


Check Photoshop layers to import: 
e te 

aaa 
M Ba Background 


Instance name: 


Registration: 


Options for “flare”: 


Import this image layer as: 


© Bitmap image with editable layer styles 
O Flattened bitmap image 


V Create movie clip for this layer 


goo 
000 
000 


The movie clip symbol icon appears to the right of the Photoshop layer, 
indicating that the imported layer will be made into a movie clip symbol. The 


other option, Flatten bitmap image, will not preserve 
transparencies or blending. 


8 Choose the Background layer in the left window. 


any layer effects such as 


9 In the options on the right, choose Bitmap image with editable layers styles. 


Import "background.psd" to Stage 


Check Photoshop layers to import: 


Instance name: 


Registration: 


Options for "Background": 


Import this image layer as: 


@ Bitmap image with editable layer styles 
O Flattened bitmap image 


V Create movie clip for this layer 


moo 
000 
000 


10 At the bottom of the dialog box, set the Convert layers to Flash Layers option, 


and select Place layers at original position. 


You also have the option of changing the Flash Stage 


size to match the 


Photoshop canvas. However, the current Stage is already set to the correct 


dimensions (600 pixels x 450 pixels). 


Convert layers to: Flash Layers E) 


M Place layers at original position 


[_] Set stage size to same size as Photoshop canvas (600 x 450) 


OFT 
( Cancel ) 


Gow) 
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® Note: If you want 
to edit your Photoshop 
files, you don’t have to 
go through the entire 
import process again. 
You can edit any image 
on the Stage or in the 
Library panel in Adobe 
Photoshop CS5 or any 
other image-editing 
application. Right-click/ 
Ctrl-click an image on 
the Stage or an image 
in the Library and 
choose Edit with Adobe 
Photoshop CS5 or Edit 
with to choose your 
preferred application. 
Flash launches the 
application, and once 
you have saved your 
changes, your image is 
immediately updated 
in Flash. 


11 Click OK. The two Photoshop layers are imported into Flash and placed on 
separate layers on the Timeline. 


The Photoshop images are automatically converted into movie clip symbols 
and saved in your Library. All the blending and transparency information is 
preserved. If you select the image in the flare layer, you'll see that the Blending 
option is set to Lighten in the Properties inspector under the Display section. 


PROPERTIES |) 


Movie Clip ly 


Instance of: flare Swap... 
> POSITION AND SIZE 

> 3D POSITION AND VIEW 

> COLOR EFFECT 

sz DISPLAY 


Cache as bitmap 


instance Name» 


> FILTERS 


12 Drag the robot and the hero layers to the top of the Timeline so they overlap the 
background layers. 


Editing and Managing Symbols 


You now have multiple movie clip symbols in your Library and several instances 
on the Stage. You can better manage the symbols in your Library by organizing 
them in folders. You can also edit any symbol at any time. If you decide you want 
to change the color of one of the robot’s arms, for example, you can easily go into 
symbol editing mode and make that change. 


Adding folders and organizing the Library 


1 In the Library panel, right-click/Ctrl-click in an empty space and select New 
Folder. Alternatively, you can click the New Folder button ( — ) at the bottom 
of the Library panel. 


A new folder is created in your Library. 
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About Image Formats 


Flash supports multiple image formats for import. Flash can handle JPEG, GIF, PNG, 
and PSD (Photoshop) files. Use JPEG files for images that include gradients and 
subtle variations, such as those that occur in photographs. GIF files are used for 
images with large solid blocks of color or black and white line drawings. Use PNG 
files for images that include transparency. Use PSD files if you want to retain all the 
layer, transparency, and blending information from a Photoshop file. 


Converting a Bitmap Image to a Vector Graphic 


Sometimes you'll want to convert a bitmap image to a vector graphic. Flash handles 
bitmap images as a series of colored dots (or pixels); vector graphics are handled 

as a series of lines and curves. This vector information is rendered on the fly, so that 
the resolution of vector graphics is not fixed like a bitmap image. That means you 
can zoom in on a vector graphic and your computer will always display it sharply 
and smoothly. Converting a bitmap image to a vector often has the effect of making 
it look “posterized” because subtle gradations are converted to editable, discrete 
blocks of color, which can be an interesting effect. 


To convert a bitmap to a vector, import the bitmap image into Flash. Select the 
bitmap and choose Modify > Bitmap > Trace Bitmap. The options determine how 
faithful of a trace the vector image will be to the original bitmap. 


In the following figure, the left image is an original bitmap and the right image is a 
vector graphic. 


Exercise caution when using the Trace Bitmap command, because a complicated 
vector graphic is often more memory and computer-processor intensive than the 
original bitmap image. 
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2 Name the folder characters. 


LIBRARY LIBRARY 
[_03_workingcopy.fla ly] a Ge [03_workingcopy.fla ly] = 
ud 
Preview not available 
8 items p 9 items p 
Name =| Linkage | Name =| Linkage 
v BE background.psd Assets v E background.psd Assets 
v 24 Assets v E Assets 
E Background = Background 
[ŒE] flare [E] flare 
Background Background 
flare flare 
[E hero E hero 
robot robot 
Ø 
Cut 
Copy 
Paste 
| New Symbol... 
New Folder \ 
| New Font... 
| New Video... | 


3 Drag the hero and the robot movie clip symbols into the characters folder. 


4 You can collapse or expand folders to hide or view their contents and keep your 
Library organized. 


LIBRARY 


[03_workingcopy.fla Ivy) a & 
ue — aeia 


9 items fe) 


Name | Linkage 
v E background.psd Assets 
v E Assets 

=] Background 
=] flare 

Background 

flare 
v B characters 

hero 

robot 
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Editing a symbol from the Library 
1 Double-click the robot movie clip symbol in the Library. 


Flash takes you to symbol editing mode. In this mode, you can see the contents 
of your symbol, in this case, the robot on the Stage. Notice on the top horizontal 
bar that you are no longer in Scene 1 but are inside the symbol called robot. 


(© 03_workingcopy.fla* 


O scene 1 [E] robot 


2 Double-click the drawing to edit it. You will need to double-click the drawing 
groups several times to drill down to the individual shape that you want to edit. 


O É scene 1 [E] robot [=] Group [=] Drawing Obiect 
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@ Note: You can 
quickly and easily 
duplicate symbols 

in the Library. Select 
the Library symbol, 
right-click/Ctrl-click, 
and choose Duplicate. 
Or, from the top-right 
Options menu in 

the Library, choose 
Duplicate. An exact 
copy of the selected 
symbol will be created 
in your Library. 


3 Choose the Paint Bucket tool. Select a new fill color and apply it to the shape on 
the robot drawing. 


* 03_workingcopy.fla* 


I f scene1 [E] robot [E] Group [=] Drawing Obiect 


4 Click on Scene 1 on the top horizontal bar above the Stage to return to the main 


Timeline. 


The movie clip symbol in the Library reflects the changes you made. The 
instance on the Stage also reflects the changes you made to the symbol. All 
instances of the symbol on the Stage will change if you edit the symbol. 


fe| 9 items 


Name aj Linkage 
> a] background.psd Assets 

v 24 characters 

hero 
robot 
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Editing a symbol in place 

You may want to edit a symbol in context with the other objects on the Stage. You 
can do so by double-clicking an instance on the Stage. You'll enter symbol editing 
mode, but you'll also be able to see the symbol’s surroundings. This editing mode is 
called editing in place. 


1 Using the Selection tool, double-click the robot movie clip instance on the 
Stage. 


Flash dims all other objects on the Stage and takes you to symbol editing mode. 
Notice on the top horizontal bar that you are no longer in Scene 1 but are inside 
the symbol called robot. 


2 Double-click the drawing to edit it. You will need to double-click the drawing 
groups several times to drill down to the individual shape that you want to edit. 
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3 Choose the Paint Bucket tool. Select a new fill color and apply it to the shape on 


the robot drawing. 


4 Click on Scene 1 on the top horizontal bar above the Stage to return to the 
main Timeline. You can also just double-click any part of the Stage outside the 
graphic with the Selection tool to return to the next higher group level. 


The movie clip symbol in the Library panel reflects the changes you made. 
The instance on the Stage also reflects the changes you made to the symbol. 
All instances of the symbol will change according to the edits you make to the 
symbol. 


6 Scene 1 


Breaking apart a symbol instance 


If you no longer want an object on the Stage to be a symbol instance, you can use 
the Break Apart command to return it to its original form. 


1 Select the robot instance on the Stage. 
2 Choose Modify > Break Apart. 


Flash breaks apart the robot movie clip instance. What’s left on the Stage is a 
group, which you can break apart further to edit as you please. 
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6 Scene 1 


“a V POSITION AND SIZE 


X: 119.75 Y: 87.90 


W: 189.40 H: 328.45 


Changing the Size and Position of Instances 


You can have multiple instances of the same symbol on the Stage. Now you'll add 
a few more robots to create a small robot army. You'll learn how to change the size 
and position (and even rotation) of each instance individually. 


1 Select the robot layer in the Timeline. 
2 Drag another robot symbol from the Library onto the Stage. 


A new instance appears. 
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3 Choose the Free Transform tool. 


Control handles appear around the selected instance. 


4 Drag the control handles on the sides of the selection to flip the robot so it is 
facing in the other direction. 


5 Drag the control handles on the corner of the selection while holding down the 
Shift key to reduce the size of the robot. 
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6 Draga third robot from the Library onto the Stage. With the Free Transform 
tool, flip the robot, resize it, and make it overlap the second robot. 


The robot army is growing! 


Using rulers and guides 


You may want to be more precise in your placement of your symbol instances. In 
Lesson 1, you learned how to use the X and Y coordinates in the Properties inspector 
to position individual objects. In Lesson 2 you learned to use the Align panel to align 
several objects to each other. Another way to position objects on the Stage is to use 
rulers and guides. Rulers appear on the top and left edge of the Pasteboard to provide 
measurement along the horizontal and vertical axes. Guides are vertical or horizontal 
lines that appear on the Stage but do not appear in the final published movie. 


1 Choose View > Rulers (Alt+Shift+R/Option+ShifttCommand+ R). 


Horizontal and vertical rulers measuring in pixels appear along the top and left 
edges of the Pasteboard. As you move objects on the Stage, tick marks indicate 
the bounding box positions on the rulers. 


200 250 
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@ Note: Lock your 
guides to prevent 
you from accidentally 
moving them by 
choosing View > 
Guides > Lock Guides. 
Clear all guides by 
choosing View > 


Guides > Clear Guides. 


Change the color of 
the guides and the 
snapping accuracy 
by choosing View > 
Guides > Edit Guides. 


2 Click the top horizontal ruler and drag a guide onto the Stage. 


A colored line appears on the Stage that you can use for alignment. 


100 150 200 |250 |390 
REA ban 


hahetalatstatatalatatatatakatatatatafatitatetak, 


3 Double-click the guide with the Selection tool. 
The Move Guide dialog box appears. 
4 Enter 435 as the new pixel value of the guide. Click OK. 


| Move Guide 
Position: Pixels ly 


The guide is repositioned 435 pixels from the top edge of the Stage. 


5 Choose View > Snapping > Snap to Guides and make sure Snap to Guides is 
selected. 


Objects will now snap to any guides on the Stage. 


6 Drag the robot instance and the hero instance so their bottom edges align with 


the guide. 


Changing the Color Effect of Instances 


The Color Effect option in the Properties inspector allows you to change several 
properties of any instance: These properties include brightness, tint, or alpha. 


Brightness controls how dark or light the instance appears, tint controls the 
overall coloring, and alpha controls the level of opacity. Decreasing the alpha value 
decreases the opacity and increases the amount of transparency. 
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Changing the brightness 
1 Using the Selection tool, click the smallest robot on the Stage. 


2 In the Properties inspector, choose Brightness from the Color Effect Style menu. 


PROPERTIES 


[anstance Name @ 
Movie Clip ly 
Instance of: robot Swap... 


s7 POSITION AND SIZE 
X: 506,25 Y: 144.65 
ëS W: 111.45 H: 193.25 


> 3D POSITION AND VIEW 


s7 COLOR EFFECT s7 COLOR EFFECT 


Style: ¥ None Style: | Brightness ly 
Brightness 
<> DISPLAY Tint Brigt: == [40 |x 
Blending: | Advanced Ly 


L Apna 


3 Drag the Bright slider to -40%. 
The robot instance on the Stage becomes darker and appears to recede into the 


distance. 
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Changing the transparency 
1 Select the glowing orb in the flare layer. 
2 Inthe Properties inspector, choose Alpha from the Color Effect Style menu. 


PROPERTIES 


dnstance Name @ 
k 


Movie Clip |v 


Swap... 


Instance of: flare 


s7 POSITION AND SIZE 
X: 0,00 Y: 0,00 
€ W: 546,00 H: 350,00 
> 3D POSITION AND VIEW 
<> COLOR EFFECT 
Style: ¥ None Style: 


Brightness 
s DISPLAY Tint Alph: =——0— _ [50 _]x 


Blending: Advanced ly 


x7 COLOR EFFECT 


Alpha ly 


@ Note: To reset the 3 Drag the Alpha slider to a value of 50%. 


Color Effect of any . 
instance, choose None The orb in the flare layer on the Stage becomes more transparent. 


from the Style menu. 
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Understanding Blend Effects 


Blending refers to how the colors of an instance interact with the colors below it. 
You saw how the instance in the flare layer had the Lighten option applied to it 
(carried over from Photoshop), which integrated it more with the instance in the 
Background layer. 


There are many kinds of Blending options. Some have surprising results, depend- 
ing on the colors in the instance and the colors in the layers below it. Experiment 
with all the options to understand how they work. The following figure shows some 
of the Blending options and their effects on the robot instance over a blue-black 
gradient. 


Normal Darken Lighten Overlay Hard Light Add Subtract Difference 


Applying Filters for Special Effects 


Filters are special effects that you can apply to movie clip instances. Several filters 
are available in the Filters section of the Properties inspector. Each filter has differ- 
ent options that can refine the effect. 


Applying a blur filter 


You'll apply a blur filter to some of the instances to help give the scene a greater 
sense of depth. 


1 Select the glowing orb in the flare layer. 


2 In the Properties inspector, expand the Filters section. 
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© Note: It’s best 

to keep the Quality 
setting for filters on 
Low. Higher settings 
are processor intensive 
and can bog down 
performance, especially 
if you have multiple 
filters. 


3 Click the Add filter button at the bottom of the Filters section and select Blur. 


The Blur filter appears in the Filters window with options for Blur X and Blur Y. 


v FILTERS 


| Property | Value 


Remove All 
Enable All 
Disable All 


Drop Shadow 


Glow 

Bevel 

Gradient Glow 
Gradient Bevel 
Adjust Color 


ee 


4 If they aren’t linked already, click the link icons next to the Blur X and Blur Y 


options to link the blur effect in both directions. 


5 Set the Blur X and Blur Y value to 10 pixels. 


s7 FILTERS 
| Property | Value | 
|¥ Blur | 
Blur X 10 px eS 
Blur Y 10 px 6 
Quality Low iy | 


The instance on the Stage becomes blurry, helping to give an atmospheric 


perspective to this scene. 
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More Filter Options 
At the bottom of the Filters window is a row of | |a R D 5 q 


options to help you manage and apply multiple filters. 


The Presets button lets you save a particular filter and its settings so you can apply 
it to another instance. The Clipboard button lets you copy and paste any selected 
filter. The Enable or Disable Filter button lets you see your instance with or without 
the filter applied. The Reset Filter button resets the filter parameters to their default 
values. 


Positioning in 3D Space 


You also have the ability to position and animate objects in real three-dimensional 
space. However, objects need to be either movie clip symbols or TLF Text to move 
them in 3D. Two tools allow you to position objects in 3D: the 3D Rotation tool 
and the 3D Translation tool. The Transform panel also provides information for 
position and rotation. 


Understanding the 3D coordinate space is essential for successful 3D placement 
of objects. Flash divides space using three axes: the x, y, and z axes. The x axis runs 
horizontally across the Stage with x=0 at the left edge. The y axis runs vertically 
with y=0 at the top edge. The z axis runs into and out of the plane of the Stage 
(toward and away from the viewer) with z=0 at the plane of the Stage. 


Changing the 3D rotation of an object 


You'll add some text to your image, but to add a little more interest, you'll tilt it to 
put it in perspective. Think about the beginning text introduction to the Star Wars 
movies, and see if you can achieve a similar effect. 


1 Insert a new layer at the top of the layers stack and rename it text. 


Tmeune [MOTION eorr] — — | 


. 
@ hero . 
@ robot . 
. 
. 


y flare 
@ Background 


2 Choose the Text tool from the Tools panel. 
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3 In the Properties inspector, choose TLF Text, Read Only, and select a large- 
size font with an interesting color that will add some pizzazz. Your font could 
appear a little differently than what’s shown in this lesson, depending on the 
fonts available on your computer. 


4 Click on the Stage in your text layer and begin typing your title. 


MECHWARS| 


f- 


ay 
a 


5 To exit the Text tool, select the Selection tool. 
6 Choose the 3D Rotation tool ( 2). 


A circular, multicolored target appears on the instance. This is a guide for 
the 3D rotation. It’s useful to think of the guides as lines on a globe. The red 
longitudinal line rotates your instance around the x axis. The green line along 
the equator rotates your instance around the y axis. The circular blue guide 
rotates your instance around the z axis. 


MECHWARS 


amy 


7 Click on one of the guides—red for x, green for y, or blue for z—and drag your 
mouse in either direction to rotate your instance in 3D space. 


You can also click and drag the outer orange circular guide to freely rotate the 
instance in all three directions. 
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Changing the 3D position of an object 


In addition to changing an object’s rotation in 3D space, you can move it to a spe- 
cific point in 3D space. Use the 3D Translation tool, which is hidden under the 3D 
Rotation tool. 


1 Choose the 3D Translation tool ( A, ). 
2 Click on your text. 


A guide appears on the instance. This is a guide for the 3D translation. The red 
guide represents the x axis, the green is the y axis, and the blue is the z axis. 


3 Click on one of the guide axes and drag your mouse in either direction to move 
your instance in 3D space. Notice that your text stays in perspective as you 
move it around the Stage. 


Resetting the rotation and position 


If you’ve made a mistake in your 3D transformations and want to reset the position 
and rotation of your instance, you can use the Transform panel. 


1 Choose the Selection tool and select the instance that you want to reset. 


2 Open the Transform panel by choosing 


TRANSFORM 


Window > Transform. Si 
«+ 100.0% $ 100.0% 5 © 
The Transform panel shows all the values for © Rotate 


the x, y, and z angles and positions. 


3 Click the Remove Transform button in the 


lower-right corner of the Transform panel. 3D Romon 

X: 61° Y: =33,6° Z: 00° 
The selected instance returns to its original 3D Center point 
settings. X: 3326 Y: 843 
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Global vs. Local Transformations 


When you choose the 3D Rotation or 3D Translation tool, be aware of the Global 
Transform option (it appears as a three-dimensional cube) at the bottom of the 
Tools panel. When the Global Transform option is depressed, rotation and position- 
ing is relative to the global, or Stage, coordinate system. The 3D display over the 
object that you're moving shows the three axes in constant position, no matter how 
the object is rotated or moved. Notice in the following image how the 3D display is 
always perpendicular to the Stage. 


However, when the Global option is turned off (the button is raised), rotation and 
positioning is relative to the object. The 3D display shows the three axes oriented 
relative to the object, not the Stage. For example, in the following image, notice 
that the 3D Translation tool shows the z axis pointing out from the rectangle, not 
from the Stage. 


Understanding the vanishing point 
and the perspective angle 


Objects in 3D space represented on a 2D surface (such as the computer screen) are 
rendered with perspective to make them appear as they do in real life. Correct per- 
spective depends on many factors, including the vanishing point and the perspec- 
tive angle, both of which can be changed in Flash. 


The vanishing point determines where on the horizon parallel lines of a perspective 
drawing converge. Think of railroad tracks and how the parallel tracks converge 
to a single point as they recede into the distance. The vanishing point is usually at 
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eye level in the center of your field of view, so the default settings are exactly in 
the middle of the Stage. You can, however, change the vanishing point setting so it 


appears above or below eye level, or to the right or left. 


The perspective angle determines how quickly parallel lines converge to the vanish- 


ing point. The greater the angle the quicker the convergence, and therefore, the 


more severe and distorted the illustration appears. 


1 Select an object on the Stage that has been moved or rotated in 3D space. 


2 In the Properties inspector, expand the 3D Position and View section. 


«instance Name 
T TLF Text ly 
Read Only ly ] [= r 


> POSITION AND SIZE 

<7 3D POSITION AND VIEW 
X: 163.6 Y: 60.5 Z: -152.6 
W: 500.9 H: 124.0 

59,2 


& =: 275.0 —_-¥:200.0 


Reset 


3 Click and drag on the X and Y values of the Vanishing Point to change the 
vanishing point, which is indicated on the Stage by intersecting gray lines. 
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4 To reset the Vanishing Point to the default values (to the center of the Stage), 
click the Reset button. 


5 Click and drag on the Perspective Angle value to change the amount of 
distortion. The greater the angle, the more the distortion. 
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Review Questions 


What is a symbol, and how does it differ from an instance? 
Name two ways you can create a symbol. 


When you import an Illustrator file, what happens if you choose to import layers as 
layers? As keyframes? 


How can you change the transparency of an instance in Flash? 


What are the two ways to edit symbols? 


Review Answers 


1 


A symbol is a graphic, button, or movie clip that you create once in Flash and can then 
reuse throughout your document or in other documents. All symbols are stored in 
your Library panel. An instance is a copy of a symbol located on the Stage. 


You can create a symbol by choosing Insert > New Symbol, or you can select existing 
objects on the Stage and choose Modify > Convert to Symbol. 


When you import layers of an Illustrator file into Flash as layers, Flash recognizes the 
layers in the Illustrator document and adds them as separate layers in the Timeline. 
When you import layers as keyframes, Flash adds each Illustrator layer to a separate 
frame in the Timeline and creates keyframes for them. 


The transparency of an instance is determined by its alpha value. To change the 
transparency, select Alpha from the Color Effect menu in the Properties inspector, 
and then change the alpha percentage. 


The two ways to edit symbols are to either double-click the symbol in the Library to 
enter symbol editing mode or to double-click the instance on the Stage to edit in place. 
Editing a symbol in place lets you see the other objects around the instance. 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 


101 


102 


ADDING ANIMATION 


Lesson Overview 


In this lesson, you'll learn how to do the following: 


Animate the position, scale, and rotation of objects 
Adjust the pacing and timing of your animation 
Animate transparency and special effects 

Change the path of the motion 

Create animation inside symbols 

Change the easing of the motion 


Animate in 3D space 


This lesson will take approximately two hours to complete. If needed, 


remove the previous lesson folder from your hard drive and copy the 


Lesson04 folder onto it. 


| MOTION EDITOR 


| Value 


F Basic mation Vite) © 
> Transformation “M &® 
¥ Color Effect Qn 

Y Alpha M ®© 


Alpha amount 0% Some č m)dob 


Filters AR 


Use Flash Professional CS5 to change almost any 
aspect of an object—position, color, transparency, 
size, rotation, and more—over time. Motion tweening 
is the basic technique of creating animation with 
symbol instances. 


Getting Started 


Start by viewing the finished movie file to see the animated title page that you'll 
create in this lesson. 


1 Double-click the 04End.swf file in the Lesson04/04End folder to play the 
animation. 


The project is an animated splash page for a soon-to-be-released fictional 
motion picture. In this lesson, you'll use motion tweens to animate several 
components on the page: the cityscape, the main actors, several old-fashioned 
cars, and the main title. 


2 Close the 04End.swf file. 


3 Double-click the 04Start.fla file in the Lesson04/04Start folder to open the initial 
project file in Flash. This file is partially completed and already contains many of 
the graphic elements imported into the Library for you to use. 


4 Choose View > Magnification > Fit in Window, or Fit in Window from the view 
options above the Stage, so that you can see the entire Stage on your computer 
screen. 


5 Choose File > Save As. Name the file 04_workingcopy.fla, and save it in the 
04Start folder. Saving a working copy ensures that the original start file will be 
available if you want to start over. 
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About Animation 


Animation is the movement, or change, of objects through time. Animation can be 
as simple as moving a box across the Stage from one frame to the next. It can also 
be much more complex. As you'll see in this lesson, you can animate many differ- 
ent aspects of a single object. You can change an object’s position on the Stage, 
change its color or transparency, change its size or its rotation, and even animate 
the special filters that you saw in the previous lesson. You also have control over an 
object’s path of motion, and even its easing, which is the way an object accelerates 
or decelerates. 


The basic workflow for animation goes like this: To animate objects in Flash, you 
select the object on the Stage, right-click/Ctrl-click, and choose Create Motion 
Tween. Move the red playhead to a different point in time and move the object to a 
new position. Flash takes care of the rest. 


Motion tweens create animation for changes in position on the Stage and for 
changes in size, color, or other attributes. Motion tweens require you to use a 
symbol instance. If the object you’ve selected is not a symbol instance, Flash will 
automatically ask to convert the selection to a symbol. Flash also automatically 
separates motion tweens on their own layers, which are called Tween layers. There 
can only be one motion tween per layer without any other element in the layer. 
Tween layers allow you to change various attributes of your instance at different 
key points over time. For example, a spaceship could be on the left side of the Stage 
at the beginning keyframe and at the far-right side of the Stage at an ending key- 
frame, and the resulting tween would make the spaceship fly across the Stage. 


The term “tween” comes from the world of classic animation. Senior animators 
would be responsible for drawing the beginning and ending poses for their char- 
acters. The beginning and ending poses were the keyframes of the animation. 
Junior animators would then come in and draw the “in-between” frames, or do 
the “in-betweening.” Hence, “tweening” refers to the smooth transitions between 
keyframes. 
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Understanding the Project File 


The 04Start.fla file contains a few of the animated elements already or partially 
completed. Each of the six layers—man, woman, Middle_car, Right_car, footer, and 
ground—contains an animation. The man and woman layers are in a folder called 
actors, and the Middle_car and Right_car layers are in a folder called cars. 


# Middle_car 
JP Right_car 
v G actors 
# man 
P woman 
P footer 
P ground 


e.. es e o: DiD 


Beouqgo8eea 


You'll be adding more layers to add an animated 


cityscape, refining the animation of one of the actors, © @ sooo al 
as well as adding a third car and a 3D title. All the Show All | 
necessary graphic elements have been imported into = 

the Library panel. The Stage is set at a generous 1280 ee 


pixels by 787 pixels to fill up a high-resolution moni- 
tor, and the Stage color is black. You might need to 
choose a different view option to see the entire Stage. 
Choose View > Magnification > Fit in Window, or choose Fit in Window from the 
view options at the top-right corner of the Stage to view the Stage at a magnifica- 
tion percentage that fits your screen. 


Animating Position 


You'll start this project by animating the cityscape. It will begin slightly lower than 
the top edge of the Stage, and then rise slowly until its top is aligned with the top of 
the Stage. 


1 Lock all the existing layers so you don’t accidentally modify them. Create a new 
layer above the footer layer and rename it city. 


TIMELINE 


v Gears 
# Middle_car 
# Right_car 
v G actors 
# man 


# woman 


| 
' 


BPD” BSDBRPPDDDD DP 
BEODSBBOBBBODO 


P footer 
# ground 


are. CICICIrIriri | 


| 
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2 Drag the bitmap image called cityBG.jpg from the bitmaps folder in the Library 
panel to the Stage. 


E) bottom back 
E caret 

E) canacate 

E carktiddle Base 
E carkight 

E carnighe_nase 


3 Inthe Properties inspector, set the value of X to 0 and the value of Y to 90. 


This positions the cityscape image just slightly below the top edge of the Stage. 


= 


Bitmap 


Instance of: cityBG.jpg __ Swap... | 


y POSITION AND SIZE 
X: 9,00 Y: 


2 W: 1280.00 H: 533,00 


4 Right-click/Ctrl-click on the cityscape image and choose Create Motion Tween. 
From the top menu, you can also select Insert > Motion Tween. 


Create Motion Tween ». 


Select All 
Deselect All 


5 A dialog box appears warning you that your selected object is not a symbol. 
Motion tweens require symbols. Flash asks if you want to convert the selection 
to a symbol so it can proceed with the motion tween. Click OK. 


The selected item cannot be tweened. You must convert this to a symbol in 
order to tween. Do you want to convert and create a tween? 


Don't show again. 


Cancel OK 
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Flash automatically converts your selection to a symbol, which is stored in your 
Library panel. Flash also converts the current layer to a Tween layer so you can 
begin to animate the instance. Tween layers are distinguished by a special icon 
in front of the layer name, and the frames are tinted blue. Tween layers are 
reserved for motion tweens, and hence, no drawing is allowed on a Tween layer. 


6 Move the red playhead to the end of the tween span at frame 190. 


7 Select the instance of the cityscape on the Stage, and while holding down the 
Shift key, move the instance up the Stage. 


Holding down the Shift key constrains the movement to right angles. 
8 For more precision, set the value of Y to 0 in the Properties inspector. 


A small black triangle appears in frame 190 at the end of the tween span. This 
indicates a keyframe at the end of the tween. Flash smoothly interpolates the 
change in position from frame 1 to frame 190 and represents that motion with a 
motion path. Hide all the other layers to see the results of the motion tween on 


the cityscape. 


a [oureur | MOTION eoor] >S S OU 


# footer 
# ground 


Sao 105 110 115 120) 125 130 = 135 140 145 150 155 160 165 170 175 180 185 1b 
v Gaars xa 
# Middle_car Xa m 
P Right_car Xa B . 
v G actors x a 
J man xa 
# woman Xa 
xam 
Xam 
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9 Drag the red playhead back and forth at the top of the Timeline to see the 
smooth motion. You can also choose Control > Play (Enter) to make Flash play 
the animation. 


Animating changes in position is simple, because Flash automatically creates 
keyframes at the points where you move your instance to new positions. If you 
want to have an object move to many different points, simply move the red 
playhead to the desired frame, and then move the object to its new position. 
Flash takes care of the rest. 


Changing the Pacing and Timing 


You can change the duration of the entire tween span or change the timing of the 
animation by clicking and dragging keyframes on the Timeline. 


Changing the animation duration 


If you want the animation to proceed at a slower pace, taking up a much longer 
period of time, you need to lengthen the entire tween span between the beginning 
and end keyframes. If you want to shorten the animation, you need to decrease 
the tween span. Lengthen or shorten a motion tween by dragging the ends on the 
Timeline. 


1 Move your mouse cursor close to the end of the tween 175 180 185 190 


span in the city layer. = 
Your cursor changes to a double-headed arrow, 

indicating that you can lengthen or shorten the tween 

span. 


2 Click and drag the end of the tween span back toward 
frame 60. 


Your motion tween shortens to 60 frames, so now the cityscape takes a much 
shorter time to move. 


© Oe Orne Bb ss. 

v Gaars xa 
# Middle_car Xa 

F Right_car Xa B 

v G actors xXxa E 
# man Xa E 

# woman Xa Bl 

P footer xa 
# ground Xa i 


@ Note: Removea 
motion tween by right- 
clicking/Ctrl-clicking the 
motion tween on the 
Timeline or the Stage 
and choosing Remove 
Tween. 
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3 Move your mouse cursor close to the beginning of the tween span (at frame 1). 


v Gaars Xa ol 
# Middle_car Xa BL 
P Right_car Xa E., 
v G actors Xa) 

# man Xa BL fa) 

P woman Xam., fa) 
P footer Xa Bl 
iP ground Xa BL 
f 

@ Note: If you have 4 Click and drag the beginning of the frame span forward to frame 10. 


multiple keyframes 

in a tween, dragging 
out your tween spans to frame 60. 
will distribute all your 
keyframes uniformly. 


Your motion tween begins at an earlier time, so it now only plays from frame 10 


The timing of your 

š r ‘ v Ga cars 
entire animation J Middle car 
remains the same; just P Rightcar 


the length changes. v G actors 
# man 


J woman 


IXxxxXxX x! e 
DRPDDDPD DBD 


iP footer 
iP ground 


BHEOSHBOBHBaAD 


xX 


Adding frames 


You'll want the last keyframe of your motion tween to hold for the entire duration 
of the animation, so you'll need to add frames to make the animation last that long. 
Add frames by Shift-dragging the end of a tween span. 


1 Move your mouse cursor close to the end of the tween span. 


@ Note: You can also 2 Hold down the Shift key and click and drag the end of the tween span forward 
add individual frames to frame 190. 

by choosing Insert > 

Timeline > Frame (F5) h 

or remove individual AS a O SS a O0 aa 65: 


frames by choosing 
Edit > Timeline > 
Remove Frames 
(Shift+F5). 
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The last keyframe in the motion tween remains at frame 60, but additional 
frames are added to frame 190. 


v Gears | 
P Middle_car Xa E| 
P Right_car Xa E 
v Gactors Xa Dl 
# man 


P woman 


# footer 
JP ground xX @ | 


Moving keyframes 


When you click on a motion tween on the Timeline, the entire span is selected. 
This allows you to move the entire motion tween forward or backward in time as 
a single unit. However, if you want to move particular keyframes within a motion 
tween to change the pacing of the animation, you have to select individual frames. 
Holding down the Ctrl (Windows)/Command (Mac) key will let you select single 
frames or a span of frames within a motion tween. 


1 Ctrl-click/Command-click on the keyframe at frame 60. 55 65 


Just the keyframe at frame 60 is selected. A tiny box appears 
next to your mouse cursor indicating that you can move the 
keyframe. 


2 Click and drag the keyframe to frame 40. 


The last keyframe in the motion tween moves to frame 40, 
so the motion of the cityscape proceeds quicker. 


vĒ@as Xa Bl 
# Middle_car Xa E. 
P Right_car Xam, 

v G actors xap 
# man | 


A woman 


P footer Xa. Ra 
PB ground Xam, 
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Animating Transparency 


In the previous lesson, you learned how to change the color effect of any symbol 
instance to change the transparency, tint, or brightness. You can change the color 
effect of an instance in one keyframe and change the value of the color effect in 
another keyframe, and Flash will automatically display a smooth change, just as it 
does with changes in position. 

You'll change the cityscape in the beginning keyframe to be totally transparent but 
keep the cityscape in the ending keyframe opaque. Flash will create a smooth fade- 
in effect. 


1 Move the red playhead to the first keyframe of the motion tween (frame 10). 


v G cars 
2 Middle_car 
P Right_car 


v G actors 
# man 
# woman 


P footer 
PB ground 


2 Select the cityscape instance on the Stage. 


3 In the Properties inspector, choose the Alpha option for Color Effect. 


4 Set the Alpha value to 0%. 


PROPERTIES ore eal 


dnstance Name» dnstance Name @ 
S k 
Movie Clip Movie Clip |v 
Instance of: Symbol 1 Instance of: Symbol 1 Swap... 
> POSITION AND SIZE D POSITION AND SIZE 
> 3D POSITION AND VIEW > 3D POSITION AND VIEW 
x7 COLOR EFFECT x7 COLOR EFFECT 
: v None Style: 
Brightness A = 
‘ : Ô= 
DISPLAY | Tint Alpha: fo |x 
FILTERS | Advanced D DISPLAY 
vy FILTERS 
q | Property | Value 
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MOTION EDITOR 


Property r | Value | Ease | Keyframe | Graph 
Jo 15 
7 Are 0 
Skew Y 0 [Mi Simple (Slow) iv ] Q o De 
zeo s 100 
Scale X 100% @ [M [No Ease x] oa eS ee a 
cA la = 100 
Scale Y 100% @ [M [No Ease iy a a ce ee ns ee ee 


Filters = Brightness 


r Eases = Tint 
side Q Advanced Color | | 
B aana 
B 28 & ss 20 = 


The cityscape instance on the Stage becomes totally transparent. 


5 Move the red playhead to the last keyframe of the motion tween (frame 40). 


TIMELINE OUTPUT | MOTION EDITOR en 


v Gears 
# Middle_car 
# Right_car 
v G actors 
# man 


# footer 


# ground 


6 Select the cityscape instance on the Stage. 


@ Note: You can also 
apply a Color Effect 
through the Motion 
Editor, as explained 
later in this lesson. Click 
the Motion Editor tab 
next to the Timeline. 
Click the plus sign next 
to Color Effect and 
select Alpha. 
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7 Inthe Properties inspector, set the Alpha value to 100%. 


oa E] 


|@ 


cs [dnstance Name> 
| Movie Clip 


Instance of: Symbol 1 


> POSITION AND SIZE 
> 3D POSITION AND VIEW 
x7 COLOR EFFECT 


Style: | Alpha ly 

Alpha: =h [100 ]% 
> DISPLAY 
wv FILTERS 
Property | Value 


The cityscape instance on the Stage becomes totally opaque. 


+ 


8 Preview the effect by choosing Control > Play (Enter). 


Flash interpolates the changes in both position and transparency between the 


two keyframes. 


Animating Filters 


Filters, which give instances special effects such as blurs and drop shadows, can also 
be animated. You'll refine the motion tween of the actors next by applying a blur 
filter to one of them to make it appear as if the camera changes focus. Animating 


filters is no different than animating changes in position or changes in color effect. 


You simply set the values for a filter at one keyframe and set different values for the 


filter at another keyframe, and Flash creates a smooth transition. 
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Make the actors layer folder on the Timeline visible. 
Lock all the layers on the Timeline except the woman layer. 


Move the red playhead to the beginning keyframe of the motion tween in the 
woman layer—at frame 23. 


sao 5 10 15 20 25 30 


v Gi cars Xa 
J Middle_car Xa E, 
P Right_car xa BL 
v G actors ap 
J man „àE, di 
PS oman 7 A E 
# city . Eb tle 
# footer xa Bo 
P ground Xa Bo 


Select the instance of the woman on the Stage. You won't be able to see her 
because she has an alpha value of 0% (totally transparent), but if you click on the 
top-right side of the Stage, the transparent instance will be selected. 


In the Properties inspector, expand the Filters section. 
Click the Add filter button at the bottom of the Filters section and select Blur. 


The Blur filter is applied to the instance. 


v FILTERS 
Property | Value 


Remove All 
Enable All 
Disable All 


Drop Shadow 


Glow 

Bevel 

Gradient Glow 

Gradient Bevel 

Adjust Color 
tie 
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@ Note: You can also 
apply a Filter through 
the Motion Editor, as 
explained later in this 
lesson. Click the Motion 
Editor tab next to the 
Timeline. Click the plus 
sign next to Filters and 
select Blur. 


7 Inthe Filters section of the Properties 


inspector, click the link icon to 


constrain the blur values to both the x 
and y directions equally. Set the X and 


Y Blur values to 20 pixels. 


8 Move the red playhead across the 
entire Timeline to preview the 
animation. 


The 20-pixel Blur filter is applied to 
the woman instance throughout the 


motion tween. 


Property | Value | Ease | Keyframe | Graph 
25 
> Basic motion [Simple (Siow) lv 
» Transformation M [Simple (Siow) Lv. 
Y Color Effect 
Y Alpha [Simple (Siow) Ly 
Alpha amount 0% M [Simple (Slow) Ly. 
Filters — Drop Shadow 
v Eases = 
Simple (Slow) 100 Gow © = ad 
Bevel 
=E 28 B ss m 20 v 


T 


~ FILTERS 
| Property | Value | | 
| v Blur 
| Blur X 20 px C] 
Blur Y 20 px eS 
Quality Low ly 


9 Right-click/Ctrl-click on the woman layer at frame 140 and choose Insert 


Keyframe > Filter. 


TIMELINE 
sago 135 | 145 150 155 160 165 170 175 180 185 190 
V@os xa Remove Tween 
P Middle_car Xa 3D Tween | 
oat Right_car x Ps = Convert to Frame by Frame Animation | 
v G actors . K 
Save as Motion Preset... 
# man ‘aun 
* woman PLEO Insert Frame Position 
P city . -E Remove Frames Scale 
P footer xal n Skew 
P ground Xa Insert Keyframe Rotation 
t yl í Color 
Clear Keyframe > Filter N 
Rinses Woe Sno wece ` h 
v All 
adog 1} ob BE 


A keyframe for filters is established at frame 140. 
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10 Move the red playhead to the end of the Timeline at frame 160. 


sa 

v Gi cars xa 
J Middle_car xa 

J Right_car xa 

v G actors - a 
2 man -a 


P city oe 
P footer xa 
P ground xa 


11 Select the instance of the woman on the Stage. 


12 In the Properties inspector, change the value of the Blur filter to X=0 and Y=0. 


The Blur filter changes from the keyframe at frame 140 to the keyframe at 160. 
Flash creates a smooth transition from a blurry instance to an in-focus instance. 


> FILTERS 


| Property 


| Value 


¥ Blur 
Blur X 
Blur Y 
Quality 


20 px 
20 px 
[ow iv] 


vy Blur 
Blur X 
Blur Y 
Quality 
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Understanding Property Keyframes 


Changes in properties are independent of each other and do not need to be tied to the same keyframes. That 
is, you can have a keyframe for position, a different keyframe for the color effect, and yet another keyframe for a 
filter. Managing many different kinds of keyframes can become overwhelming, especially if you want different 
properties to change at different times during the motion tween. Fortunately, Flash Professional CS5 provides a 
few helpful tools. 


When viewing the tween span, you can 155 
choose to view the keyframes of only certain 
properties. For example, you can choose 
to view only the position keyframes to see 


e4 Remove Tween Darrere 
3D Tween 

Convert to Frame by Frame Animation 

Save as Motion Preset... 


‘ v Position 
when your object moves. Or, you can choose Insert Frame v Scale 
to view only the filter keyframes to see when Remove Frames v Skew 
there is a filter change. Right-click/Ctrl-click Insert Keyframe > | ae 
on a motion tween in the Timeline, choose ert Blank Keyframe < Filter 

; > Clear Keyframe > 
View Keyframes, and then select the desired . 
View Keyframes > All 


property among the list. You can also choose 
All or None to see all the properties or none 
of the properties. 


None 


When inserting a keyframe, you can also aa Remove Tween = (sti‘(‘iés*é*C 
insert a keyframe specific to the property 3D Tween 
you want to change. Right-click/Ctrl-click — Convert to Frame by Frame Animation 


on a motion tween in the Timeline, choose Save as Motion Preset... 


Insert Keyframes, and then select the desired 


Insert Frame 


Position 
property. Remove Frames res 
The Motion Editor is a special panel that dis- in oe — Skew 
plays all the properties of your motion tween Clear Keyframe > Color 
visually as lines on a graph. The Motion View Keyframes > | Filter | 
All 


Editor is helpful when multiple properties are 7 v — 
changing at different times. For example, the ne ee ae ee ee 
Motion Editor for the woman is shown here and shows changes in the x-position and Alpha values in the first 
few frames, and changes in the Blur filter in the last few frames. 


You'll learn more about how to use the Motion Editor later in this lesson. 


MOTION EDITOR 


Property | Value | Ease | Keyframe | Graph 
Rt Se Pe, Se, ee ee ee N ene Mens, 
Y Basic motion v © 
x 301px 5 Gorse) asd TLL 
Y 208 px v 4 pan 
Rotation Z o° A 4 je a eR E 
> Transformation “M ®© 
¥ Color Effect Qn 
¥ Alpha Mw ® 
Alphaamount 100% A Moise iv) 4 Lo Aa a 
¥ Filters Q R 
¥ Blur “M 2 
Blur X ox & & 4 eS SS SE Ee PE PE EE VEE | EE DE RY ess Cf 
Blur Y omx èp © Woke) 4 ro aa ea pee ete 
Quality 
> Eases QR 
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Animating Transformations 


Now you'll learn how to animate changes in scale or rotation. These kinds of 
changes are made with the Free Transform tool or with the Transform panel. You'll 
add a third car to the project. The car will start small, and then become larger as it 
moves forward toward the viewer. 


1 Lock all the layers on the Timeline. 


2 Insert a new layer inside the Cars folder 
and rename it Left_car. 


J Middie_car 
# Right_car 
v G actors 

# man 


Ba 


v Ge cars 
=“ Left_car 
# Middle_car 
# Right_car 
v G actors 
# man 
J woman 
P city 
# footer 
# ground 


v 
. EI 
DEDO DDDDT DD 


CA ASRR AEN AT 


4 Drag the movie clip symbol called carLeft from the Library panel to the Stage at 
frame 75. 


5 Select the Free Transform tool. 


The transformation handles appear around the instance on the Stage. 
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6 While holding down the Shift key, click and drag the corner handle inward to 
make the car smaller. 


7 Inthe Properties inspector, make sure that the width of the car is about 400 
pixels. 


8 Alternatively, you can use the Transform panel (Window > Transform) and 
change the scale of the car to about 29.4%. 


9 Move the car to its starting position at about X=710 and Y=488. 


10 In the Properties inspector, select Alpha for 5> COLOR EFFECT 
the Color Effect. style: [Aipha Lv] 
11 Set the value of the Alpha to 0%. Alpha: (= [o_|x 


The car becomes totally transparent. 


12 Right-click/Ctrl-click on the car on the Stage and select Create Motion Tween. 


Fi 


Create Motion Tween 


The current layer becomes a Tween layer. 
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13 Move the red playhead on the Timeline to frame 100. 
vumecine Lourpu | MOTION EDITOR | 


65 70 75 80 85 90 95 [ipo 105 


Boa 


v Gi cars 
_" Left_car 
i Middle_car 
# Right_car 
v G actors 
# man 


-KAR @ 


) 
= 


Ole + 


# woman 
P city 
# footer 
P ground 


CE ANR AEL AE) 
+ 


oe oe eo ee we 


Ole 


14 Select the transparent instance of the car, > COLOR EFFECT 
and in the Properties inspector, change the Style: [Alpha J 
Alpha value to 100%. Alpha: ———%, [100 ]% 


A new keyframe is automatically inserted at 
frame 100 to indicate the change in transparency. 


15 Select the Free Transform tool. 


16 While holding down the Shift key, click and drag the corner handle outward to 
make the car larger. For more precision, use the Properties inspector and set the 
dimensions of the car to width=1379.5 pixels and height=467.8 pixels. 


17 Position the car at X=607 and Y=545. 
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18 Move the Left_car layer in between the Middle_car and Right_car layers so that 
the car in the center overlaps the cars on the side. 


Flash tweens the change in position and the change in scale from frame 75 


to frame 100. Flash also tweens the change in transparency from frame 75 to 
frame 100. 


TIMELINE | OUT 


v Gears 
# Middle_car 


P Right_car a 

v G actors a 
# man -a 

#2 woman -a 
a 

a 

a 


# city 
# footer . 
ground 


Changing the Path of the Motion 


The motion tween of the left car that 
you just animated shows a colored 
line with dots indicating the path of 
the motion. The path of the motion 
can be edited easily so that the car 
travels in a curve, or the path can be 
moved, scaled, or even rotated just 
like any other object on the Stage. 


To better demonstrate how you can 
edit the path of the motion, open the 
sample file 04MotionPath.fla. The file contains a single Tween layer with a rocket 
ship moving from the top left of the Stage to the bottom right. 
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Motion Presets 


If your project involves creating identical motion tweens repeatedly, 
s 4 A MOTION PRESETS 
Flash provides a panel called Motion Presets that can help. The Motion 
Presets panel (Window > Motion Presets) stores a particular motion 


tween so you can apply it to different instances on the Stage. Q 


For example, if you want to build a slide show where each image fades 
out in the same manner, you can save that transition to the Motion 
Presets panel. 


1 Simply select the first motion tween on the Timeline or the instance 


on the Stage. aera a 
2 Inthe Motion Presets panel, click the Save selection as preset button. v [ Default Presets E 
2” bounce-in-3D 
3 Name your motion preset, and it will be saved in the Motion Presets Poe H 
panel. Æ" bounce-smoosh 
; i =" fly-in-blur-bottom 
4 Selecta new instance on the Stage and choose the motion preset. ©" fly-in-blur-left 
6 a z 5 2 fh -in-blur-right 
5 Click Apply and your saved motion preset will be applied to the new Apia $ 


instance. 


Flash provides a number of motion presets that you can use to quickly 
build sophisticated animations without much effort. 


Moving the path of the motion 


You will move the path of the motion so the relative movement of the rocket ship 
remains the same but its starting and ending positions change. 


1 Choose the Selection tool. 
2 Click on the path of the motion to select it. 


The path of the motion becomes highlighted when it is selected. 
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3 Click and drag the motion path to move it to a different place on the Stage. 


The relative motion and timing of the animation remain the same, but the 
starting and ending positions are relocated. 


Changing the scale or rotation of the path 

The path of the motion can also be manipulated with the Free Transform tool. 
1 Select the path of the motion. 

2 Choose the Free Transform tool. 


Transformation handles appear around the path of the motion. 
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3 Scale or rotate the path of the motion as desired. You can make the path smaller 
or larger, or rotate the path so the rocket ship starts from the bottom left of the 
Stage and ends at the top right. 


Editing the path of the motion 


Making your objects travel on a curved path is a simple matter. You can either edit 
the path with Bezier precision using anchor point handles, or you can edit the path 
in a more intuitive manner with the Selection tool. 


1 Choose the Convert Anchor Point tool, which =m €} Pen Tool (P) 
is hidden under the Pen tool. QY Add Anchor Point Tool (=) 
{Y Delete Anchor Point Tool (-) 
2 Click on the starting point or the ending point N Convert Anchor Point Tool (C) 


of the motion path on the Stage and drag the 
control handle out from the anchor point. 


The handle on the anchor point controls the curvature of the path. 
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3 Choose the Subselection tool. 


4 Click and drag the handle to edit the curve of the path. Make the rocket ship 
travel in a wide curve. 


® Note: The path of the motion can also be directly manipulated with the Selection tool. Choose 
the Selection tool and move it close to the path of the motion. A curved icon appears next to your 
cursor indicating that you can edit the path. Click and drag the path of the motion to change its 
curvature. 


Orienting objects to the path 


Sometimes the orientation of the object traveling along the path is important. In 
the motion picture splash page project, the orientation of the car is constant as 
it rumbles forward. However, in the rocket ship example, the rocket ship should 
follow the path with its nose pointed in the direction in which it is heading. The 
Orient to path option in the Properties inspector gives you this option. 
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1 Select the motion tween on the Timeline. 


2 In the Properties inspector, select the Orient to path option. 


PROPERTIES 


[a Motion Tween 
sz EASE 
Ease: 0 
wv ROTATION 
Rotate: -times + -° 
Direction: | none Ly 
M Orient to path 
vam 
X: 95.7 Y: 53.6 
i) Ww: 345.0 H: 297.0 
xz OPTIONS 
M Sync graphic symbols 


Flash inserts keyframes for rotation along the motion tween so that the nose of @ Note: To direct the 
the rocket ship is oriented to the path of the motion. nose of the rocket ship, 
or any other object, 
along the path of its 
motion, you must orient 
its initial position so 
that it is facing in the 
direction that you want 
it to travel. Use the 

Free Transform tool to 
rotate its initial position 
so that it is oriented 
correctly. 


Swapping Tween Targets 


The motion tween model in Flash Professional CS5 is object based. This means that 
you can easily swap out the target of a motion tween. If, for example, you’d rather 
see an alien moving around the Stage instead of a rocket ship, you can replace the 
target of the motion tween with an alien symbol from your Library panel and still 
preserve the animation. 
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1 Select the rocket ship on the Stage to select the motion tween. 


2 Drag the movie clip symbol of the alien from the Library panel onto the rocket 


ship. 


alien_armleft 
alien_armright 
alien_body_pants 
alien_body_shirt 
alien_body_shoe 
alien_eyeblink 
alien_head 
alien_head_antenna 
alien_head_eye 
rocket 


HRP RSPR 


Flash asks you if you want to replace the existing object with a new object. 


ia Do you wish to replace the existing tween target object? 


C Don't show again. 


3 Click OK. 
4 The rocket ship is replaced with the alien. 


The motion remains the same, but the target of the motion tween has been 
swapped. 
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@ Note: You can also swap instances in the 
Properties inspector. Select the object that you 
want to swap on the Stage. In the Properties 
inspector, click the Swap button. In the dialog box 
that appears, choose a new symbol and click OK. 
Flash will swap the target of the motion tween. Instance of; alien Swap... 


PROPERTIES 


Movie Clip 


s7 POSITION AND SIZE Swap symbol 
— 


Creating Nested Animations 


Often, an object that is animated on the Stage will have its own animation. For 
example, a butterfly moving across the Stage will have an animation of its wings 
flapping as it moves. Or the alien that you swapped with the rocket ship could be 
waving his arms. These kinds of animations are nested animations, because they 
are contained inside the movie clip symbols. Movie clip symbols have their own 
Timeline that is independent of the main Timeline. 


In this example, you'll make the alien wave his arms inside the movie clip symbol, 
so he'll be waving as he moves across the Stage. 


Creating animations inside movie clip symbols 
1 Inthe Library panel, double-click the alien movie clip symbol icon. 


You are now in symbol-editing mode for the alien movie clip symbol. The alien 
is in the middle of the Stage. In the Timeline, the parts of the alien are separated 
in layers. 
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2 Choose the Selection tool. 


3 Right-click/Ctrl-click on the alien’s right arm and choose Create Motion Tween. 


Create Motion Tween 


Create Shape Tween 


Cut 


Copy 
Paste 


Copy Motion 


Flash converts the current layer to a Tween layer and inserts one second worth 
of frames so you can begin to animate the instance. 


vmeune [mononeoron| o 


T feet 
W head 
SU body 
Barm. 
SG arm2 


4 Choose the Free Transform tool. 


5 Drag the corner rotation control points to rotate the arm upward to the alien’s 
shoulder height. 


A keyframe is inserted at the end of the motion tween. The right arm rotates 
smoothly from the resting position to the outstretched position. 


6 Move the red playhead back to frame 1. 


7 Now create a motion tween for the alien’s other arm. Right-click/Ctrl-click on 
the left arm and choose Create Motion Tween. 


Flash converts the current layer to a Tween layer and inserts one second worth 
of frames so you can begin to animate the instance. 
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8 Choose the Free Transform tool. 


9 Drag the corner rotation control points to rotate the arm upward to the alien’s 
shoulder height. 


A keyframe is inserted at the end of the motion tween. The left arm rotates 
smoothly from the resting position to the outstretched position. 


10 Select the last frame in all the other layers and insert frames (F5) so that the 
head, body, and feet all remain on the Stage for the same amount of time as 
the moving arms. 


11 Exit symbol-editing mode by clicking the Scene 1 button at the top-left of @ Note: Animations 
he S inside of movie clip 
the stage. symbols won't play 
Your animation of the alien raising his arms is complete. Wherever you use the on the main timeline. 


Choose Control > 

Test Movie > in Flash 
Professional to preview 
nested animations. 


movie clip symbol, the alien will continue to play its nested animation. 
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@ Note: Animations 12 Preview the animation by choosing Control > Test Movie > in Flash 


inside movie clip Professional. 
symbols will loop 
automatically. To Flash opens a window showing the exported animation. The alien moves along 


prevent the looping, 
you need to add 
ActionScript to tell the 000 04MotionPath.swf 
movie clip Timeline to 
stop on its last frame. 
You'll learn more about 
ActionScript in Lesson 6, 
“Creating Interactive 
Navigation.” 


the motion path while the nested animation of his arms moving plays and loops. 


3 


Using the Motion Editor 


The Motion Editor panel provides in-depth information and editing capabilities 
for all the properties of a motion tween. The Motion Editor is located behind the 
Timeline and can be accessed by clicking the top tab or by choosing Window > 
Motion Editor. 


On the left side of the Motion Editor, an expandable list of properties is displayed 
along with their values and easing options. On the right side, a timeline shows vari- 
ous lines and curves representing how those properties change. 


MOTION EDITOR 


F 


Property | Keyframe | Graph 


¥ Basic motion 
x 
Y 


Rotation Z 
¥ Transformation 
Skew X 
Skew Y 
Scale X 
Scale Y 
¥ Color Effect 
¥ Alpha 


RNR 


KRK 


Alpha amount 
Filters 


v Eases 


Simple (Slow) 
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Setting the Motion Editor display options 

Options for displaying the Motion Editor are listed at the bottom of the panel. 
1 Select the alien on the Stage. 

2 Open the Motion Editor panel if it is not already visible. 


3 Move your cursor over the gray horizontal bar separating the Motion Editor 
from the Stage. 


Your cursor changes to a double-headed arrow indicating that you can increase 
or decrease the height of the Motion Editor panel. 


Property | Value | 


¥ Basic motion 
xX 
Y 


Rotation Z 


¥ Transformation 


Skew X 0° 
Skew Y 0° 
Scale X 100% ə 
Scale Y 100% € 


4 Click and drag the horizontal bar to increase the height of the Motion Editor 
panel. 


5 Click the triangles to collapse all the properties categories on the left. You 
can expand or collapse the categories to see only those categories you are 
interested in. 


MOTION EDITOR 


Property | Value | Ease | Keyframe | Graph 


> Basic motion E (No Ease iy 


> Transformation M (No Ease ix 


Color Effect 


Q 
Filters =] 
(=] 


> Eases 
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6 Click and drag on the Viewable Frames icon at the bottom of the Motion Editor 
to change the number of frames that appear in the timeline. Set the Viewable 
Frames value to the maximum to see the entire motion tween. 


MOTION EDITOR 
Property | Value | Ease 
¥ Basic motion O Moase tv) 
x Mi (No Ease Ly. 
Y [ (No Ease iy 
Rotation Z O Moise X 
> Transformation M (NoEase iv) 


Color Effect 
Filters 


> Eases 


E: 20 =t m SApyiewable Frames 


7 Click and drag the Graph Size icon at the bottom of the Motion Editor to 
change the vertical height of each property that is listed on the left. 


Property | value | Ease | Keyframe | Graph 


¥ Basic motion E (No Ease Ly. © 


x 109 px M (Nokase iv) 19b 


Y: 74.8 px Mi CNo Ease Ly om 


Rotation Z oe O Woke) d ¢ 
A 


b 
> Transformation No Ease E2 © 
Color Effect 2 R 


Filters 


Lt 


8 Click and drag the Expanded Graph Size icon at the bottom of the Motion 
Editor to change the vertical height of each selected property. 


To see how the Expanded Graph Size option affects the display, click the X 
property under Basic motion. The larger the Expanded Graph Size value, the 
more of the selected property you can view. 


MOTION EDITOR 
Property | Value | Ease | Keyframe | Graph 
¥ Basic motion E (No Ease Ly. © 
x 109 px Y (No Ease Ly. ob 
af 748px M CNo Ease iy) dop 
Rotation Z g* O Moise w dod 


B37 [=] Hgg Expanded Graph Size 
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Changing property values 


You will change another property of your flapping alien with the Motion Editor and 
see how easy it is to animate multiple properties independently. For this example, 
you'll create a fade-in effect by changing the Alpha property. 


1 Next to the Color Effect property, click the Plus icon and choose Alpha. 


MOTION EDITOR 


Property | Value | Ease | Keyframe | Graph 
| Se 

> Basic motion = 2 
> Transformation M &® | 

Color Effect Q a — n 

Filters a ; 
Wee G Brightness 

Tint 


The Alpha property appears in the Motion Editor under the Color Effect 
category. 

2 Select the Alpha amount. 
The Alpha property expands, displaying a black-dotted horizontal line at 100% 


extending from frame 1 to the end of the timeline. This line represents the 
opacity of the alien throughout the motion tween. 


3 Click on the first keyframe, which is indicated by a black square, and drag it 
down to 0%. You can also change the Alpha value by clicking and dragging the 
value next to the Alpha amount. 


MOTION EDITOR 


Property | Value | Ease | Keyframe | Graph 


> Basic motion E (No Ease Ly 
> Transformation M Cno Ease Ly. 
¥ Color Effect 
Y Alpha M (No Ease Ly) 
Alpha amount 0% M Cro Ease Ly 


Filters 


> Eases 


The alien becomes transparent beginning at frame 1. 
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Inserting keyframes 
Inserting keyframes is easy. 


1 Move the red playhead to frame 20. 


> Basic motion 


> Transformation 


x Color Effect 
v Alpha 


Alpha amount 0% 


> Eases Qa 


2 Click the diamond icon to add a keyframe at that point in time for the Alpha 
property. You can also right-click/Ctrl-click on the graph and choose Insert 
Keyframe. 


> Basic motion 


> Transformation 


v Color Effect 
v Alpha 


Alpha amount 0% 


Filters Q EJ 
aR 


s Eases 2 


A new keyframe for the Alpha property is inserted at frame 20. 
3 Click on the second keyframe. 


The selected keyframe becomes highlighted. 


LESSON 4 Adding Animation 


4 Drag the second keyframe up to change the Alpha value to 100%. 


MOTION EDITOR 


Property | Value | Ease | Keyframe | Graph 

Ween es Mca E E 

> Basic motion © (NoEase iv) D 

> Transformation M CNoEase iv) ®© 

¥ Color Effect Q g 

¥ Alpha M (No Ease Ly ®© 
aay pLi00.00%) 777 

Alpha amount 10063 M Cro Ease iv] qo! 50 
Filters = 
> Eases Q R 


Flash animates the smooth transition of transparency from frame 1 to frame 20. 


Editing keyframes 


You can easily navigate keyframes and remove them, and you can move keyframes 


to control the precise timing of each of your transitions. 


Click the left or right arrow beside the diamond-shaped icon to move quickly 
between keyframes. 


Right-click/Ctrl-click on any keyframe and choose Remove Keyframe to delete a 
keyframe. 


Select a keyframe and click the yellow diamond to delete the keyframe. 


Shift-click to select multiple contiguous keyframes and move them together. 


Resetting values and deleting properties 


If you’ve made a mistake in setting a property, you can easily reset its value or 
delete it from the Motion Editor entirely so the property won’t be animated. 


1 


Click the Reset Values button to reset the property to its default values. 


MOTION EDITOR 


Property | Value | Ease | Keyframe | Graph 
| FRE RE ten Liles ic hea 
> Basic motion = 
> Transformation “M 
¥ Color Effect QA 
¥ Alpha My 
-IVU Le ee re 
Reset Values | 
Alphaamount 0% “M Ee 
Filters QR 
> Eases AR 
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2 Click the Minus button and select Alpha to delete the property from the Motion 


Editor. 


MOTION EDITOR 


Property 


| Value 


| Keyframe | Graph 


Filters 


T ners ine PO EA 
> Basic motion EO (NoEase iv) © 
> Transformation M (No Ease Ly. © 
¥ Color Effect gh 2 
v Alpha M (No Ease L7) | Remove Color, Filter or Ease | 
Alpha amount 0% [Vj CNo Ease Ly 


> Eases 


Easing 


Easing refers to the way in which a motion tween proceeds. In the most basic sense, 
it can be thought of as acceleration or deceleration. An object that moves from one 
side of the Stage to the other side can start off slowly, then build up momentum, 
and then stop suddenly. Or, the object can start off quickly, and then gradually 


come to a halt. 


Easing is best visualized in the Motion Editor. The graphs that connect one key- 
frame to another are usually straight lines, which indicate that the change from 

one value to the next value proceeds linearly. However, if you want a more gradual 
change from the starting position (known as an ease-in), the line would be curved 
near the beginning keyframe, indicating a slower start. A gradual slowdown (known 
as an ease-out) would be represented by a curve near the ending keyframe. 


Setting eases of a motion tween 


You can create an ease by customizing the curvature of the property graph in the 


Motion Editor. 


1 Inthe Motion Editor, right-click/Ctrl-click the second keyframe in the Alpha 
property and choose Smooth point. 


ERE vonon oron 


Property | Value | Ease | Keyframe | Graph 
1 TA T Se R. See eee ee 
> Basic motion M CNoEase iv) ®© 
> Transformation M (No Ease ly) D 
¥ Color Effect Qk 
Y Alpha M(Notase i) © 
rvv = 
Remove Keyframe 
Alpha amount 199% (i Co Ease Tv] 4 op He Roving 
Corner point 
Filters gq sulci all 
> Eases Q co moo! e 


Smooth right 
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Control handles appear from the keyframe, which you can move to change the 
curvature of the line. 


Click and drag the control handle to create a smooth curve approaching the 
100% Alpha value. 


E| motion evrror 
Property | Value | Ease | Keyframe | Graph 


> Basic motion 
» Transformation 
¥ Color Effect 

¥ Alpha 


Alphaamount 100% 


Filters 
» Eases 


The transition from 0% to 100% Alpha slows down as it approaches 100% 
(ease-out). 


Right-click/Ctrl-click the first keyframe in the Alpha property and choose 
Smooth point. 


| Keyframe | Graph 


> Basic motion Yose ivy) ® 

> Transformation M Cno Ease ly D 
¥ Color Effect Qh 
Y Alpha (NoEase iv) 


Remove Keyframe 


Roving 


Corner point 
Smooth point 

Smooth left 4% 
Smooth right 


Alpha amount 0% 


Filters 


Control handles appear from the keyframe, which you can move to change the 


curvature of the line. 


Click and drag the control handle to create a smooth curve as the line begins 
from 0%. 


E| motion evrror 
Property 


| Keyframe | Graph 


Ease 
> Basic motion M [No Ease ly 
> Transformation M 
¥ Color Effect = 
Y Alpha M (No Ease Ly 


Alpha amount 9% (Norse A ob [98 HHHH 


Filters 
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The transition from 0% to 100% Alpha begins gradually from 0% in addition to 


slowing down. The total effect of the S-shaped curve is both an ease-in and an 


ease-out effect. 


@ Note: You can also apply ease-in and ease-out 
effects from the Properties inspector. In the Timeline 
(not the Motion Editor), select the motion tween. In 
the Properties inspector, enter a value for the ease 
between -100 (ease-in) to 100 (ease-out). 


@ Note: Eases applied via the Properties inspector 
will be applied globally to all the properties 
throughout the entire motion tween. With the Motion 
Editor, you have precise control over individual 
properties and eases between keyframes. 


Using preset eases 


| (4 Motion Tween 


wv EASE 


Ease: 
WV ROTATION [Easing value | 


—_— 
Rotate: -times +z’ 


Direction: | none Ly] 


& Orient to path 


> PATH 
> OPTIONS 


Easing can be very powerful and can be used to create many specialized motions. 


For example, a bouncing motion can be created with just two positional keyframes 


and an ease that moves the object back and forth between the two positions. 


For the next example, you'll return to the motion picture project and add a preset 


ease to the motion of the car. You'll make the car shudder up and down to mimic 


the motion of an idling car. The motion tween will be created inside the movie clip 


symbol of the car. 


1 Continue with your Flash project in progress, 04_workingcopy.fla. 


2 In the Library panel, double-click the movie clip symbol called carLeft. 


Flash takes you to symbol-editing mode for the movie clip symbol. Two layers 


are inside this symbol: the top layer called lights and the bottom layer called 


smallRumble. 


T smallRumble 


3 Lock the top lights layer. 
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4 Right-click/Ctrl-click on the car and choose Create Motion Tween. 


Create. Motion Tween 


Cut 
Copy 
Paste 


Flash converts the current layer to a Tween layer so you can begin to animate 
the instance. 


5 Move the red playhead to the end of the Timeline. 
6 Choose the Selection tool. 


7 Move the car down about 5 pixels. 


TIMELINE 


w lights ~a iy 
A smallRumble fee, 


Flash creates a smooth animation of the car moving down slightly. 
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8 Click on the motion tween in the Timeline and open the Motion Editor. 


9 Click the Plus icon on the Eases category and choose Random. 


Property 


| Value 


> Basic motion 


> Transformation 


Color Effect 


Filters 
| ¥ Eases 


Simple (Slow) 


The Random preset ease appears. 


10 Select the Random ease. 


Simple (Slow) 

Simple (Medium) þf- 
Simple (Fast) 

Simple (Fastest) 

Stop and Start (Slow) 
Stop and Start (Medium) 
Stop and Start (Fast) 
Stop and Start (Fastest) 
Bounce 

Bounce In 

Spring 

Sine Wave 

Sawtooth Wave 

Square Wave 

Random |. 

Damped Wave 


The Random ease jumps from one value to the next in random intervals. This is 


shown graphically as a series of abrupt stair steps. 


> Basic motion 
> Transformation 


Color Effect 
Filters 
v Eases 
1-Simple (Slow) 9 
2-Random 3 
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11 Change the Random value to 15. 


The frequency of random jumps increases based on the Random value. 


MOTION EDITOR 
Property | Value | Ease | Keyframe | Graph | 
1 5 10 15 a | 

> Basic motion i © 
> Transformation v“ © 

Color Effect Q cts 

Filters Q è 
v Eases Q g 

rssicon o a ene essee| aliens aa | 


2-Random ail Ae] patens : i i 


Boece a ha See 


S37 E 2% m 20 E = 


12 Select the Basic motion category. 


13 In the Ease pull-down menu next to the Basic motion category, choose Random. 


MOTION EDITOR 
Property | Value | Ease | Keyframe | Graph | 
a ay i) a a ae a a a a a 
V Basic motion U m > 
_ v No Ease Í 
x 1.5 px 
Y 5.5 px 
Rotation Z o° A 4 PE E 
> Transformation v ® 
Color Effect Qe 
Filters q dh 
v Eases QR 
1-Simple (Slow) o ee Se RR 
2-Random 15 ofesees | eek yc Oe a aie i 
fig press | i on A | eg JUN ue 
S37 E 9% m 2 E > 
Flash applies the Random ease to the positional changes of the motion tween. 
Instead of a smooth change in the y-position, Flash makes the car jerk up and 
down randomly, simulating a rumbling, idling car. Since the animation is nested 
in a movie clip, choose Control > Test Movie > in Flash Professional to preview 
the motion. 
Classic Tween Model 
In previous versions of Flash Professional (CS3 and earlier), motion tweens were cre- L Modify Text 
ated by first establishing keyframes in the Timeline, then changing one or more of the lacs dar aT diced 
properties of the instance, and then applying a motion tween between the two key- Motion Tween | 


Sh 


frames. If you are more comfortable working with this older way of animating, you can 
do so by relying on the Classic Tween option. Select the first keyframe containing your Te a 
instance, and then choose Insert > Classic Tween. Flash applies a classic motion tween 


to your Timeline. The Motion Editor, however, is not available for classic tweens. Soe 
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Animating 3D Motion 


Finally, you'll add a title and animate it in 3D space. Animating in 3D presents 
the added complication of a third (z) axis. When you choose the 3D Rotation or 
3D Translation tool, you need to be aware of the Global Transform option at the 


bottom of the Tools panel. The Global Transform option toggles between a global 


option (button depressed) and a local option (button raised). Moving an object with 


the global option on makes the transformations relative to the global coordinate 


system, whereas moving an object with the local option on makes the transforma- 


tions relative to itself. 


1 Click on Scene 1 to return to the main timeline and insert a new layer at the top 


of the layer stack and rename it title. 


Teone [MORON EBON [a 
SAOL s 
poate Cl. T 
VG cars -a, 
B Middle_car -â D, 
P Left_car . « BL 
M Right_car -a EB, 
VG actors “acd 
B man . â D, 
A woman . à D, 
B city -a O 
P footer . âA E. 
P ground . â D, 


2 Lock all the other layers. 


3 Insert a new keyframe at frame 120. 


TIMELINE 


"I title 7 


sao 
. 
VG cars àm 
B Middle_car .a D| 
P Left_car “ab 
A Right_car -a 
VG actors “and 
B man -a 
A woman -ab 
A city “al 
A footer "am 
P ground -aB 


4 Drag the movie clip symbol called movietitle from the Library panel onto the 


Stage. 


The movie title instance appears in your new layer in the keyframe at frame 120. 
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5 Position the title at x=180 and y=90. 


Mark Wendy 
SOUSA CARTER 


6 Right-click/Ctrl-click on the movie title and choose Create Motion Tween. 


Flash converts the current layer to a Tween layer so you can begin to animate 
the instance. 


7 Move the red playhead to frame 140. 
TIMELINE [MOTION EDITOR | — 
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8 Select the 3D Rotation tool. 


9 Deselect the Global Transform option at the bottom of the Tools panel. 
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10 Click and drag the title to rotate it around the y-axis (green) so that its angle is 
at about —50 degrees. You can check the rotation values in the Transform panel 
(Window > Transform). 


TRANSFORM 


+» 100.0% $ 100.0% Constrain 


@ Rotate A 0,0° 
OSkew 27 


3D Rotation 

x: 00° y: =50.0° z: 0.0° 
3D Center point 

x: 416.0 Y: 235.0 z: 0.0 


11 Move the red playhead to the first keyframe at frame 120. 


12 Click and drag the title to rotate it around the y-axis in the opposite direction so 
that its angle is at about 25 degrees and the instance looks like just a sliver. 


OSkew 2&7 


3D Rotation 

x: 00° y: 25.0° 

3D Center point 

x: 416,0 y: 235.0 z: 0.0 


Flash motion tweens the change in the 3D rotation, so the title appears to swing 
in three dimensions. 
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Previewing the Animation 


You can quickly preview your animation by “scrubbing” ° “ 
, i CONTROLLER [| 

the red playhead back and forth on the Timeline or by 

choosing Control > Play. You can also choose Window > 


E i4 <i > i> Pi 


Toolbars > Controller to display a controller panel with 
buttons to rewind and play your Timeline. 


However, to preview your animation as your audience will see it and to preview any 
nested animations within movie clip symbols, you should test your movie. Choose 
Control > Test Movie > in Flash Professional. 


Flash exports a SWF file and saves it in the same location as your FLA file. The SWF 
file is the compressed, final Flash media that you would embed in an HTML page. 
Flash displays the SWF file in a new window with the exact Stage dimensions and 
plays your animation. 


fans 04_workingcopy.swt 


To exit Test Movie mode, click the Close window button. 


@ Note: The exported SWF in Test Movie mode will loop automatically. To prevent the looping in 
Test Movie mode, choose Control > Loop to deselect the loop option. 


® Note: If you are 
authoring a Flash 
animation for another 
platform such as a 
mobile device, you can 
preview your movie 
by choosing Control > 
Test Movie > in Device 
Central. Adobe Device 
Central is a separate 
application that allows 
you to preview your 
movie as it would 
appear and function on 
a mobile device. 
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Review Questions 


1 What are two requirements of a motion tween? 
What kinds of properties can a motion tween change? 
What are property keyframes, and why are they important? 


How can you edit the path of a motion? 


u F&F U N 


What are three ways to add easing to a motion tween? 


Review Answers 


1 A motion tween requires a symbol instance on the Stage and its own layer, which is 
called a Tween layer. No other tween or drawing object can exist on the Tween layer. 


2 A motion tween creates smooth transitions between different keyframes of an object’s 
location, scale, rotation, transparency, brightness, tint, filter values, or 3D rotation or 
translation. 


3 A keyframe marks a change in one or more of an object’s properties. Keyframes are 
specific to each property, so that a motion tween can have keyframes for position that 
are different from keyframes for transparency. 


4 To edit the path of a motion, choose the Selection tool and click and drag directly 
on the path to bend it. You can also choose the Convert Anchor Point tool and 
Subselection tool to pull out handles at the anchor points. The handles control the 
curvature of the path. 


5 Three ways to add easing to a motion tween include: 


e Select the motion tween on the Timeline and change the Ease value in the 
Properties inspector. 


e Inthe Motion Editor, right-click/Ctrl-click on any keyframe to pull out control 
handles and change the curvature of the graph. 


e Adda preset ease to the Ease category of the Motion Editor and apply it to a 
property. 
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ARTICULATED MOTION 
AND MORPHING 


Lesson Overview 


In this lesson, you'll learn how to do the following: 


Animate armatures with multiple linked movie clips 
Constrain the joints 

Animate armatures with shapes 

Morph organic shapes with shape tweens 

Simulate physics with the spring feature 


Use shape hints to refine shape tweens 


This lesson will take approximately two and a half hours to complete. If 


needed, remove the previous lesson folder from your hard drive and copy 
the Lesson05 folder onto it. 


You can easily create complex motion with 
articulations—joints between linked objects—with 
the feature called inverse kinematics. You can also 
morph—create organic changes in shapes—with 
shape tweens. 


Getting Started 


You'll start the lesson by viewing the animated crane and floating buoy that you'll 
create as you learn about articulated motion and morphing in Flash. You'll also be 
animating a tentacle of an octopus. 


1 Double-click the 05End.swf file in the Lesson05/05End folder to play the 
animation. Double-click the O5ShapeIK_End.swf to play that animation as well. 


The first project is an animation depicting a crane working at the seaside 

dock and a buoy floating along the gentle undulations of the water. In this 
lesson, you'll animate the crane arm, the buoy, and the smooth motion of the 
waves. The other project is an animation showing an octopus curling one of its 
tentacles. 


2 Double-click the 05Start.fla file in the Lesson05/05Start folder to open the initial 
project file in Flash. 


3 Choose File > Save As. Name the file 05_workingcopy.fla, and save it in the 
O5Start folder. Saving a working copy ensures that the original start file will be 
available if you want to start over. 
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Articulated Motion with Inverse Kinematics 


When you want to animate an articulated object (one that has multiple joints), such 
as a walking person, or as in this example, a moving crane, Flash Professional CS5 
makes it easy to do so with inverse kinematics. Inverse kinematics is a mathemati- 
cal way to calculate the different angles of a jointed object to achieve a certain 
configuration. You can pose your object in a beginning keyframe, and then set a 
different pose at a later keyframe. Flash will use inverse kinematics to figure out the 
different angles for all the joints to get from the first pose to the next pose. 


Inverse kinematics makes animating easy because you don’t have to worry about 
animating each segment of an object or limb of a character. You just focus on the 
overall poses. 


Defining the bones 


The first step to create articulated motion is to define the bones of your object. You 
use the Bone tool ( <, ) to do that. The Bone tool tells Flash how a series of movie 
clip instances are connected. The connected movie clips are called the armature, 
and each movie clip is called a node. 


1 In your O5working_copy.fla file, select the crane layer. Lock all the other layers. 


2 Drag the cranearm1 movie clip symbol from the Library panel onto the Stage. 
Place the instance right above the rectangular crane base. 
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3 Drag the cranearm2 movie clip symbol from the Library panel onto the Stage. 
Place the instance next to the tip of the cranearm1 movie clip instance. 


4 Drag another instance of the cranearm2 movie clip symbol from the Library 


panel onto the Stage. Place this instance next to the free tip of the first 
cranearm2? instance. 


You'll have two cranearm?2 instances next to each other. 
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5 Drag the cranerope movie clip symbol from the Library panel onto the Stage. 
Place the instance so it hangs down from the last cranearm?2 instance. 


Your movie clip instances are now in place and ready to be connected with 
bones. 


6 Select the Bone tool. 


7 Click on the base of the cranearm1 instance and drag the Bone tool to the base 
of the cranearm2 instance. Release the mouse button. 


Your first bone is defined. Flash shows the bone as a skinny triangle with a 
round joint at its base and a round joint at its tip. Each bone is defined from the 
base of the first node to the base of the next node. For example, to build an arm, 
you would click on the shoulder side of the upper arm and drag it to the elbow 
side of the lower arm. 
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8 Click on the base of the cranearm2 instance and drag it to the base of the next 
cranearm2 instance. Release the mouse button. 


Your second bone is defined. 


9 Click on the base of the second cranearm2 instance and drag it to the base of 
the cranerope instance. Release the mouse button. 


Your third bone is defined. Note that the four movie clip instances, which are 
now connected with bones, have been separated to a new layer with a new icon 
and name. The new layer is a Pose layer, which keeps your armatures separate 
from other objects on the Timeline such as graphics or motion tweens. 
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Armature Hierarchy 


The first bone of an armature is referred to 


PROPERTIES | LIBRARY | | 
as the parent, and the bone that is linked Ses 
to it is called the child. A bone can actu- AEE (NSS 
ally have more than one child attached to O O Ç ūüİ(€o ooo 
it as well. For example, an armature of a SERCAT 
puppet would have a pelvis connected to Poston Anan EnA 
two thighs, which in turn are attached to Length: 83.7\px Angle:0:002 
two lower legs of their own. The pelvis is Speed: 100% 
the parent, each thigh is a child, and the <> JOINT: ROTATION 
thighs are siblings to each other. As your Enable 


armature becomes more complicated, 
you can use the Properties inspector to 
navigate up and down the hierarchy using these relationships. 


When you select a bone in an armature, the top of the Properties inspector displays 
a series of arrows. 


You can click the arrows to move through the hierarchy and quickly select and view 
the properties of each node. If the parent bone is selected, you can click the down 
arrow to select the child. If a child bone is selected, you can click the up arrow to 
select its parent, or click the down arrow to select its own child if it has one. The 
sideways arrows navigate between sibling nodes. 


10 Rename the Pose layer cranearmature and delete the empty crane layer that 
contained the initial movie clip instances. 


TIMELINE |) Ol 


@ containers . 
w cranebase 


w water 
w buoy . 
W background . 


Inserting poses 


Think of poses as keyframes for your armature. You have an initial pose for your 
crane in frame 1. You will insert two additional poses for the crane. The next pose 
will position the crane down as if it were picking something up from the ocean. The 
last pose will position the crane back up to lift up the object. 
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q water 
wW buoy 
@ background 
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1 Move the red playhead to frame 50. 


AL SURI a euclee aL ae NO UALeEey 
q containers - a B. i 
q cranebase 


@ water a. 
a buoy e a | 
@ background -aB. 


2 Using the Selection tool, click on the hook at the end of the cranerope instance 


and drag it down to the water. 


A new pose is automatically inserted at frame 50. As you drag the cranerope 
instance, notice how the entire armature moves along with it. The bones keep all 
the different nodes connected. 


3 Move the red playhead to frame 100 (the last frame). 


4 Click on the hook at the end of the cranerope instance and drag it up out of the 


water. 


A new pose is automatically inserted at frame 100. 


Articulated Motion and Morphing 


5 Preview the animation by choosing Control > Test Movie > in Flash 
Professional. 


The crane animates, moving all its crane segments from one pose to the next. 


Isolating the rotation of individual nodes 


As you pull and push on the armature to create your pose, you may find it difficult 
to control the rotation of individual nodes because of their linkages. Holding down 
the Shift key as you move individual nodes will isolate their rotation. 


1 Select the third pose at frame 100. 


2 Holding down the Shift key, click and drag on the second node in the armature 
to rotate it so that it points downward. 


The second node of the crane rotates, but the first node does not. 


@ Note: You can edit 
poses on the Timeline 
just as you can with 
keyframes of a motion 
tween. Right-click/Ctrl- 
click along the Timeline 
and choose Insert Pose 
to insert a new pose. 
Right-click/Ctrl-click 

on any pose and select 
Clear Pose to remove 
the pose from the layer. 
Ctrl-click/Command- 
click on a pose to select 
it. Click and drag the 
pose to move it toa 
different position along 
the Timeline. 
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3 Holding down the Shift key, click and drag on the third node in the armature to 
rotate it so that it points upward. 


The third node of the crane rotates, but the first and second nodes do not. 


4 Holding down the Shift key, click and drag on the last node in the armature (the 
cranerope instance) so that it points straight down. 


Holding down the Shift key helps you isolate the rotations of the individual 
nodes so that you can position your poses exactly as you want them. The crane 
now retracts by collapsing its different arm segments. 
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Editing Armatures 


You can easily edit the armature by repositioning the nodes or by deleting and add- 
ing new bones. If one of the nodes of your armature is slightly off, for example, you 
can use the Free Transform tool to rotate it or move it into a new position. This does 
not change the bones, however. 


You can also move nodes into new positions by holding down the Alt/Option key 
while dragging the node to a different location. 


If you want to remove bones, simply click on the bone that you want to delete 
and press the Delete key on the keyboard. The selected bone and all the bones 
connected to it down the chain will be removed. You can then add new bones if 
desired. 


Constraining Joints 


The various joints of the crane can freely rotate, which isn’t particularly realistic. 
Many armatures in real life are constrained to certain angles of rotation. For exam- 
ple, your forearm can rotate up toward your bicep, but it can’t rotate in the other 
direction beyond your bicep. When working with armatures in Flash Professional 
CS5, you can choose to constrain the rotation for various joints or even constrain 
the translation (movement) of the various joints. 


Next, you'll constrain the rotation and translation of the various joints of the crane 
so they move more realistically. 


Constraining the rotation of joints 


By default, the rotation of joints have no constraints, which means they can rotate 

in a full circle, or 360 degrees. If you only want a certain joint to rotate in a quarter 

circle arc, you would constrain the joint to 90 degrees. 

1 Click the second pose at frame 50 in the cranearmature layer, right-click/ 
Ctrl-click, and select Clear Pose. 


TIMELINE | OUTPUT | COMPILER ERRORS | MOTION EDITOR 
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2 Click the third pose at frame 100 in the cranearmature layer, right-click/ 
Ctrl-click, and select Clear Pose. 


QJ containers 
T cranebase 


Remove Armature 
Convert to Frame by Frame Animatior 


q water 
q buoy 
@ background 


oo B. -l@ 


nsert Pose 
Clear Pose 


I} Sa C2 100 24,00tps 4.15 


Jag 


Your armature now has only a single pose at frame 1. 
3 Move the red playhead to frame 1. 
4 Choose the Selection tool. 


5 Click on the second bone in the crane armature. 


The bone becomes highlighted, indicating that it is selected. 


6 In the Properties inspector, select the Constrain option in the Joint:Rotation 
section. 
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P IK Bone l H 


xz LOCATION 


ikBoneName2 


Position X: 148.20 Y¥:61.10 
Length: 83.7 px Angle:0.00° 
Speed: 100% 
x7 JOINT: ROTATION 
M Enable 


M Constrain Min: -45° Max: 45° 


Vv Constrain rotation around joint 


O Enable 


O Constrain Min: 0.0 Max: 0.0 
x7 JOINT: Y TRANSLATION 


An angle indicator appears on the joint, showing the minimum and maximum 
allowable angles and the current position of the node. 


7 Set the minimum joint rotation angle to 0 degrees and the maximum joint 
rotation angle to 90 degrees. 


x7 JOINT: ROTATION 
M Enable 


M Constrain Min: 0° Max:[90 ] 


The angle indicator changes on the joint, showing the allowable angles. In this 
example, the second segment of the crane can only bend downward or rise up 
to be level with the horizon. 
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8 Click on the third bone in the crane armature. 


The bone becomes highlighted, indicating that it is selected. 


9 In the Properties inspector, select the Constrain option in the Joint:Rotation 
section. 


An angle indicator appears on the joint, showing the minimum and maximum 
allowable angles and the current position of the node. 


10 Set the minimum joint rotation angle to -90 degrees and the maximum joint 
rotation angle to 0 degrees. 


x7 JOINT: ROTATION 
M Enable 
M Constrain Min: -90° Max: E | 


The angle indicator changes on the joint, showing the allowable angles. In this 
example, the third segment of the crane can only bend from a level position 
to a vertical position. Each joint in an armature can have its own rotation 


constraints. 


Constraining the translation of joints 


You don’t normally think of joints that can move positions. However, in Flash 
Professional CS5, you can allow joints to actually slide in either the x (horizontal) 
or the y (vertical) direction, and set the limits on how far those joints can travel. 


In this example, you'll allow the first node (the tall first segment of the crane) to 
move back and forth as if it was on a track. This will give it the capability to pick up 
any sort of cargo from the ocean and place it on the dock. 
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1 Click on the first node in the crane armature. 


2 Deselect the Enable option in the Joint:Rotation section of the Properties 
inspector. 


„o Keone KERE 
P alii 


ikBoneNamel 


sz LOCATION 


Position X: 127.80 Y:416.30 
Length: 355.8 px Angle:0.00° 
Speed: 100% 
s7 JOINT: ROTATION 


O Constrain Min: 0° Max: 0° 


The circle around the joint disappears, indicating that it can no longer rotate. 
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3 Select the Enable option in the Joint:X Translation section of the Properties 
inspector. 


Arrows appear from the joint, indicating that the joint can travel in that 
direction. 


s7 JOINT: X TRANSLATION 


M Enable 


O Constrain Min: 0,0 Max: 0.0 


4 Select the Constrain option in the Joint:X Translation section of the Properties 
inspector. 


The arrows turn into straight lines, indicating that the translation is limited. 
5 Set the minimum X translation to -50 and the maximum X translation to 50. 


The bars indicate how much translation in the x direction the first bone can do. 


x7 JOINT: X TRANSLATION 


M Enable 


M Constrain Min: -50,0 Max:50 | 
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6 Grab the hook and pose the crane in the first keyframe so that the first node is 
close to the edge of the water and the hook is lowered. 


7 Move the red playhead on the Timeline to the last frame. 


Changing Joint Speed 


Joint speed refers to the stickiness, or stiffness, of a joint. A joint with a low joint 
speed value will be sluggish. A joint with a high joint speed value will be more 
responsive. You can set the joint speed value for any selected joint in the Properties 
inspector. 


The joint speed is apparent when you poy ë 


drag the very end of an armature. If there 


np, IK Bone alege 
are slow joints higher up on the armature 
f a ae z ikBoneName3 
chain, those particular joints will be less 
8 z vz LOCATION 
responsive and will rotate to a lesser 
Position X: 182.45 Y:116.35 


degree than the others. 
Length: 99.8 px Angle: -90.00° 


Speed: 


<z JOINT: ROTATION 


To change the joint speed, click ona 
bone to select it. In the Properties inspec- 
tor, set the joint Speed value from 0% 

to 100%. 
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8 Move the hook out of the water and the crane back from the edge of the water, 


creating a new pose. 


The constraints on joint rotation and joint translation impose limits on the 
poses that help you create more realistic animations. 


9 Watch your animation by choosing Control > Test Movie > in Flash 
Professional. 


Inverse Kinematics with Shapes 


The crane is an armature made with various movie clip symbols. You can also cre- 
ate armatures with shapes, which are useful for animating objects without obvious 
joints and segments but can still have an articulated motion. For example, the arms 
of an octopus have no actual joints, but you can add bones to a smooth tentacle to 
animate its undulating motion. 


Defining bones inside a shape 


You'll add bones to an octopus—perhaps one that was picked up by the crane from 
the ocean depths—and animate one of its tentacles. 


1 Open the file 05ShapelK_Start.fla. Choose File > Save As. Name the file 
05ShapelK_workingcopy.fla. 


The file contains an illustration of an octopus. One arm is separated on its own 
layer called arm1. 
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sano 5 10 15 20 25 30 35 40 45 50 
wW body àm 
wW arml . E 
w staticarms X-ag 
@ background -a@B 


Lock all the layers except for the arm1 layer and select the contents of the arm1 
layer. 


Choose the Bone tool. 


Click on the base of the tentacle in the arm1 layer and drag out the first bone a 
little ways down toward the tip of the tentacle. 
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The first bone is defined. The contents of the arm1 layer are separated to a new 


Pose layer. 
sag 5 
W body -a E 
Armature_1 . > E| 
Ql arml . o mp 
T staticarms -aut | 
q background -aul | 


5 Click on the end of the first bone and drag out the next bone a little farther 
down toward the tip of the tentacle. 


The second bone is defined. 


6 Continue building the armature with a total of four bones. 
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7 When the armature is complete, use the Selection tool to click and drag the 
last bone to see how the deformation of the tentacle follows the bones of the 


armature. 


Editing the shape 


You don’t need any special tools to edit the shape that contains bones. Many of the 
same drawing and editing tools in the Tools panel, such as the Paint Bucket, the Ink 
Bottle, and the Subselection tools, are available to you to edit the fill, the stroke, or 
the contours. 


1 Choose the Paint Bucket tool. 
2 Choose a dark peach color for the Fill. 


3 Click on the shape in the Pose layer. 


The fill color of the tentacle changes. 


9B. PG. 
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4 Choose the Ink Bottle tool. 
5 Choose a dark red color for the stroke. 


6 Click on the shape in the Pose layer. 


The outline of the tentacle changes color. 


7 Choose the Subselection tool. 
8 Click on the contour of the shape. 


The anchor points and the control handles appear around the contour of the 
shape. 


9 Drag the anchor points to new locations or click and drag the handles to make 
edits to the tentacle shape. 


@ Note: Add new points on the contour of the shape with the Add Anchor Point tool. Delete points 


on the contour of the shape with the Delete Anchor Point tool. Both the Add Anchor Point and 
Delete Anchor Point tools are located under the Pen tool. 
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Editing the bones and armature 


The Subselection tool can move the joints within a shape. However, the location of 
the joints within the shape can only be edited when you have a single pose for your 
armature. After your armature has been repositioned in later frames of the Pose 
layer, changes to the bone structure cannot be made. 


Use the Selection tool if you want to move the entire armature to a different loca- 
tion but keep the bone structure unchanged. 


1 Choose the Subselection tool. 
2 Click on a joint. 


3 Click and drag the joint within the shape to a new location. 


4 Choose the Selection tool. Hold down the Alt/Option key and drag the entire 
armature to a new location. 


@ Note: You can easily remove bones or add more bones to your armature. Choose the Selection 
tool and click on the bone you want to delete. Press the Delete key to remove the selected bone; all 
the child bones will be removed as well. Add new bones by choosing the Bone tool and clicking on 
the armature. 
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Refining the Shape Behavior 
with the Bind Tool 


The organic control of a shape by its 
armature is a result of a mapping between 
the anchor points along the shape and 

its bones. The points along the tip of the 
tentacle, for example, are mapped to the 
very last bone, whereas the points farther 
up the tentacle are mapped to the bones 
farther up the tentacle. Hence, where the 
bones rotate, the shape follows. 


You can edit the connections between the 
bones and their control points with the 
Bind tool ( È ). The Bind tool is hidden 
under the Bone tool. The Bind tool displays 
which control points are connected to 
which bones and lets you break those connections and make new ones. 


Choose the Bind tool and click on any bone in the shape. The selected bone is highlighted in red, and 
all the connected control points on the shape are highlighted in yellow. 


If you want to redefine which control points are connected to the selected bone, you can do the 
following: 


e  Shift-click to add additional associations to control points. 
e = Ctrl-click/Command-click to remove associations to control points. 


e Drag a connection line between the bone and the control point. In the following figure, a line is 
being dragged from the selected bone to a point on the left to make the association. 
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Click on any control point on the shape. The selected control point is highlighted in red, and all the 
connected bones are highlighted in yellow. In this figure, the red highlighted point is associated with 
the first bone. 


If you want to redefine which bones are connected to the selected control point, you can do the 
following: 


e  Shift-click to add additional associations to bones. 
e = Ctrl-click/Command-click to remove associations to bones. 


e Drag a connection line between the control point and the bone. In the following figure, another 
control point farther down the tentacle is being associated with the first bone. 
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Armature Options 


Many settings are available through the Properties inspector that can help you 
make your armature interactive or help you apply easing to your armature motion. 
You can also choose different viewing options for your armature to suit your work- 
ing style. 


Authortime and runtime armatures 


Authortime armatures are those that you pose along the Timeline and play as 
straightforward animations. Runtime armatures refer to armatures that are 
interactive and allow the user to move your armature. You can make any of your 
armatures—whether they are made with a series of movie clips such as the crane or 
made with a shape such as the octopus tentacle—into an authortime or a runtime 
armature. Runtime armatures, however, are restricted to armatures that only have 
a single pose. 


1 Continue with the file O5ShapeIK_workingcopy.fla. 
2 Select the layer containing the tentacle armature. 


3 In the Properties inspector, select Runtime from the Type option. 


PROPERTIES 


g IK Armature 
a Armature_1 
s7 EASE 


Strength: 0.0 


Type: | none v 
sz OPTIONS 

Type: Authortime | 

Style: ly 
s7 SPRINGS 
M Enable 


The armature becomes a runtime armature, allowing the user to directly 
manipulate the octopus tentacle. The first frame of the Pose layer displays the 
armature icon to indicate that the runtime option is selected and no additional 
poses can be added. 


a of 
-àm 
eo e E 
q staticarms „àm | 
@ background -aB | | 


176 LESSON 5 Articulated Motion and Morphing 


4 Test your movie by choosing Control > Test Movie > in Flash Professional. 


The user can click and drag the tentacle and interactively move it on the Stage. 


Controlling easing 


The Motion Editor and its sophisticated controls for easing cannot be used with 
armatures. However, there are a few standard eases available from the Properties 
inspector that you can apply to your armatures. Easing can make your armature 
move with a sense of gravity due to acceleration or deceleration of its motion. 


1 Select the layer containing the tentacle armature. 

2 In the Properties inspector, select Authortime for Type in the Options section. 
The armature becomes an authortime armature again. 

3 Select frame 40 for all the layers and choose Insert > Timeline > Frame. 


Frames are inserted in all the layers, giving you room on the Timeline to create 
additional poses for the tentacle. 


neue [MOTION TOR | SS 


pepe ete ee eee eee ee EE 


q body 


Sl staticarms 
QI background 


4 Move the red playhead to frame 40. 
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5 With the Selection tool, grab the tip of the tentacle, curl it upward, and move it 
to one side. 


A new pose is inserted in frame 40 for the tentacle armature. 


6 Select the first pose in frame 1 of the Armature layer. 


7 Inthe Properties inspector, select Simple (Medium) for the Type under the Ease 
section. 


IK Armature 


up 


Armature_1 


> EASE 
Strength: 0.0 
Type: V none 

_ Simple (Slow) | 
TINS, Simple (Medium) 

Type: Simple (Fast) | 

style: Simple (Fastest) | 

Stop and Start (Slow) | 

MEANS Stop and Start (Medium) 


M Enable Stop and Start (Fast) 
Stop and Start (Fastest) 


The variations of Simple eases (from Slow to Fastest) represent the severity of 
the ease. They represent the same curvatures provided in the Motion Editor for 
motion tweens. 


8 Set the Strength to 100. 


w EASE 


Strength: 100.0) 


Type: | Simple (Medium) Ly] 


The Strength represents the direction of the ease. A negative value is an ease-in 
and a positive value is an ease-out. 
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9 Choose Control > Test Movie > in Flash Professional to preview your animation. 


The tentacle curls up, easing out of its motion gradually. 


10 Close the Test Movie window. 
11 Select the first pose in frame 1. 
12 Change the Strength setting to -100 and test your movie again. 


The tentacle curls up, but the motion now eases in, starting slowly and gradually 
speeding up. 


13 Close the Test Movie window. 
14 Select the first pose in frame 1. 


15 In the Properties inspector under the Ease 
section, select Start and Stop (Medium) 


PROPERTIES 


IK Armature 


for Type. Ye Armature_1 

The variations of Stop and Start eases (from ee EER 

Slow to Fastest) represent the severity of the Type: none 

ease. The Stop and Start eases have curves on FAEN a Sadia) 
both ends of the motion, so the easing values A =i needle 
affect the start of the motion and the end of SMA Stop and Start (Siow) 


g kaati 7 Stop and Start (Medium) | 
the motion. Menable | Stop and Start (Fast) | 


Stop and Start (Fastest) 
16 Set the Strength to -100. 


17 Choose Control > Test Movie > in Flash 
Professional to preview your animation. 


The tentacle curls up, easing into its motion gradually and also easing out of its 
motion gradually. 
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Morphing with Shape Tweens 


Shape tweening is a technique for interpolating amorphous changes between 
shapes in different keyframes. Shape tweens make it possible to smoothly morph 
one thing into another. Any kind of animation that requires that the contours of a 
shape change—for example, animation of clouds, water, or fire—is a perfect candi- 
date for shape tweening. 


Both the fill and the stroke of a shape can be smoothly animated. Because shape 
tweening only applies to shapes, you can’t use groups, symbol instances, or bitmap 
images. 


Establish keyframes containing different shapes 


In the following steps, you'll animate the gently undulating surface of the ocean 
beneath the crane with a shape tween. 


1 Continue with the file of the crane animation called 05_workingcopy.fla. 


2 Lock and hide all the layers except for the water layer. The water layer contains 
a transparent blue shape at the bottom of the Stage. 


€ 
Te aR 


containers 
@ cranebase 
&# cranearmature 


J buoy 
@ background 


3 Move the red playhead to frame 50 in the water layer. 


4 Right-click/Ctrl-click on frame 50 in the water layer and select Insert Keyframe. 
Or, choose Insert > Timeline > Keyframe (F6). 


SJ containers 
T cranebase 
$ cranearmature 


SJ buoy 
q background 


A new keyframe is inserted at frame 50. The contents of the previous keyframe 
are copied into the second keyframe. 


5 Move the red playhead to frame 100. 
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6 Right-click/Ctrl-click on frame 100 in the water layer and select Insert 
Keyframe. Or, choose Insert > Timeline > Keyframe (F6). 


QI containers 
q cranebase 
& cranearmature 


SU buoy 
@ background 


A new keyframe is inserted at frame 100. The contents of the previous keyframe 
are copied into this keyframe. You now have three keyframes on the Timeline in 
the water layer: one at frame 1, a second at frame 50, and a third at frame 100. 


7 Move the red playhead back to frame 50. 
Next, you'll change the shape of the water in the second keyframe. 
8 Choose the Selection tool. 


9 Click and drag the contours of the water shape so that the crests become dips 
and the dips become crests. 


Each subsequent keyframe in the water layer contains a different shape. 


Apply the shape tween 


The next step is to apply a shape tween between the keyframes to create the smooth 
transitions. 


1 Click on any frame between the first keyframe and the second keyframe in the 
water layer. 


2 Right-click/Ctrl-click and select Create Shape Tween. Or, from the top menu 
choose Insert > Shape Tween. 


Ql containers 
q cranebase 


& cranearmature 


q buoy 
@ background 
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Flash applies a shape tween between the two keyframes, which is indicated by a 
black forward-pointing arrow. 


TIMELINE 


W containers 
@ cranebase 
& cranearmature 


@ buoy 
q background 


3 Click on any frame between the second keyframe and the last keyframe in the 
water layer. 


4 Right-click/Ctrl-click and select Create Shape Tween. Or, choose Insert > Shape 
Tween. 


w containers 
Gl cranebase 
$ cranearmature 


T buoy 
@ background 


Create Shape Tween h 
Create Classic Tween 


Flash applies a shape tween between the last two keyframes, which is indicated 
by a black forward-pointing arrow. 


@ containers 
W cranebase 
& cranearmature 


I buoy x 
@ background x 


@ Note: The Motion 5 Watch your animation by choosing Control > Test Movie > in Flash 


Editor is not available Professional. Flash creates a smooth animation between the keyframes in the 


for shape t $ : 
ic EEES water layer, morphing the shape of the ocean surface. 
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Using Shape Hints 


Shape hints force Flash to map points on the first shape to corresponding points on 
the second shape. By placing multiple shape hints, you can control more precisely 
how a shape tween appears. 


Adding shape hints 


Now you'll add shape hints to the shape tween of the wave to modify the way it 
morphs from one shape to the next. 


1 Select the first keyframe of the shape tween in the water layer. 
mmewe kovipuiljcomenirnons | ATA ONE 6 


|] containers 
@ cranebase 
$ cranearmature 


q buoy 
@ background 


2 Choose Modify > Shape > Add Shape Hint (Ctrl+Shift+ H/Command+Shift+H). 


A red circled letter “a” appears on the Stage. The circled letter represents the 
first shape hint. 


3 Drag the circled letter to the top-left corner of the ocean shape. 


Shape hints should be placed on the contours of shapes. 
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4 Choose Modify > Shape > Add Shape Hint again to create a second shape hint. 
A red circled “b” appears on the Stage. 


5 Drag the “b” shape hint to the top edge of the ocean shape at the bottom of a 
dip of the wave. 


6 Adda third shape hint. 


A red circled “c” appears on the Stage. 


7 Drag the “c” shape hint to the far top-right corner of the ocean shape. 


7 


You have three shape hints mapped to different points on the shape in the first 
keyframe. 


8 Select the next keyframe of the water layer (frame 50). 


A corresponding red circled “c” appears on the Stage, although an “a” and a “b” 
shape hint are directly under it. 


9 Drag the circled letters to corresponding points on the shape in the second 
keyframe. The “a” hint goes on the top-left corner, the “b” hint goes on the 
bottom of the wave, and the “c” hint goes on the top-right corner. 
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The shape hints turn green, indicating that you’ve correctly placed the shape hint. 


10 Select the first keyframe. 


Note that the initial shape hints have turned yellow, indicating that they are 
correctly placed. 


11 Choose Control > Test Movie > in Flash Professional to see the effects of the @ Note: You can add a 
shape hints on the shape tween. maximum of 26 shape 
hints to any shape 
The shape hints force the crest of the first shape to map to the crest of the tween. Be sure to add 
second shape, causing the shape tween to appear more like a traveling wave them in a clockwise 


or counterclockwise 
direction for best 
results. 


instead of an up-and-down bobbing motion. 


Removing shape hints 
If you’ve added too many shape hints, you can easily delete the unnecessary ones. 


Removing a shape hint in one keyframe will remove its corresponding shape hint in 
the other keyframe. 


e Drag an individual shape hint entirely off the Stage and Pasteboard. 
e Choose Modify > Shape > Remove All Hints to delete all the shape hints. 


Simulating Physics with Inverse Kinematics 


Now that you’ve animated the undulating water beneath the crane, it would be 

nice to see the red buoy move along the surface as well. You could create a motion 
tween so it travels along the water. However, since the buoy has a flexible flag 
attached, it'll be more realistic to see the flag and the pole wave and bend as the 
buoy moves. Flash Professional CS5 introduces a new feature for inverse kinematics 
called Spring that helps you do this easily. 
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The Spring feature simulates physics in any animated armature. A flexible object 
(like a flag or a flag pole) normally would have some “springiness” that would cause 
it to jiggle on its own as it moves, and continue to jiggle even after motion of the 
entire body stops. The amount of springiness can be set for each bone in an arma- 
ture to help you get the exact amount of rigidity or flexibility in your animation. 


Define bones for your armature 


In the following steps, you'll animate the buoy floating across the water and set the 
strength of the spring in each of the bones in the armature of the buoy. The first 
step is to add bones to the shape of the buoy. 


1 Lock and hide all the layers except for the buoy layer and select the contents of 
the buoy layer. 


2 Choose the Bone tool. 


3 Click on the base of the buoy and drag out the first bone to the tip of the 
triangular support at the bottom of the flag pole. 


The first bone is defined. The contents of the buoy layer are separated to a new 
Pose layer. 


4 Click on the end of the first bone and drag out the next bone a little farther up 
the flag pole. 


The second bone is defined. 
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5 Click on the end of the second bone and drag out the next bone to the left into 
the flag. 


6 Define two more bones to extend the armature to the tip of the flag. @ Note: The Spring 
feature for inverse 
kinematics works for 
both armatures in 
shapes and armatures 
with movie clips. 


The bones in the flag will help the flag wave realistically. The bone in the flag 
pole will help the pole bend separately from the floating bottom. 


Setting the spring strength for each bone 


Next, you'll set the strength value for the spring for each bone. The strength value 
can range from 0 (no spring) to 100 (maximum spring). 


1 Select the last bone (at the tip of the flag) of the armature in the buoy. 
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In the Properties inspector, in the Spring rey 


section, enter 100 for the Strength. P Keone EHE 


The last bone has the maximum spring ikBoneName51 
xz LOCATION 


strength since the flag tip is the most flexible 
part of the whole buoy and would have the 
most independent motion. 


Position X: 400.95 Y:430.50 
Length: 18.0 px Angle:-93.01° 


Speed: 100% 


> JOINT: ROTATION 
> JOINT: X TRANSLATION 
> JOINT: Y TRANSLATION 


sz SPRING 
Strength: [100 __|Damping: i) 
Select the next bone in the armature ery 
PROPERTIES 
hierarchy. It may be difficult to select the p Kime II SRG] 
next adjacent bone if they are too crowded [itoneNames1 Parent] 
together, so you can choose the Parent = LOCATION 
button in the Properties inspector to move Position X: 400.95 ¥:430.50 
up the hierarchy. 
In the Properties inspector, in the Spring ~ SPRING 
section, enter 60 for the Strength. strength: [F] Damping: 0 


The middle of the flag is a little less flexible 
than the tip, so it has a smaller strength value. 


Select the next adjacent bone, and in the Properties inspector, in the Spring 
section, enter 20 for the Strength. 


The base of the flag is even less flexible than the middle of the flag, so it has an 
even smaller strength value. 


Select the next adjacent bone (the bone within the pole), and in the Properties 
inspector, in the Spring section, enter 50 for the Strength. 


s7 SPRING 


Strength: [50 |Damping: 0 


Giving the pole a medium amount of spring strength will make the pole bend 
back and forth on the buoy. 
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Insert the next pose 


Next, you'll move the buoy across the water and watch how its horizontal motion 
affects the movement of the individual bones in the armature. 


1 Unhide all the layers so you can see where the buoy is located on the scene. 
2 Select frame 70 of the armature layer, which contains your buoy. 


TIMELINE | OUTPUT. | COMPILER ERRORS | MOTION ED oo ooon 


q containers . . Eb 
q cranebase . ¢ He 
% cranearmature 
@ water 


@ background . - i. | 


3 Holding down the Alt/Option key, click and drag the buoy and move it to the 
right so it meets the shipping containers on the edge of the Stage. 


Holding down the Alt/Option key allows you to move the entire armature 
around the Stage. 


4 Choose Control > Test Movie > in Flash Professional to see the motion of the @ Note: The effects of 

buoy and its attached flag. the Spring feature are 
more apparent when 
there are additional 
frames on the Timeline 
after the armature’s 
final pose, as in this 
lesson. The additional 
frames allow you to see 
the residual bouncing 
effect after the motion 
stops. 
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The buoy moves from left to right. At the same time, the flag pole bends and the 
flag sways. When the buoy stops at the edge of the Stage, the pole and the flag 


continue to move. 


Refining armature spring values 


Although the flexibility of the flag and the pole on the buoy gives the animation 
more realism, the floating bottom should also rock as it moves. In this section, 
you'll refine your armature by adding some spring to the first bone in the buoy. 


1 Lock and hide all the layers except for the armature layer containing the buoy 
and select the first bone. 


2 In the Properties inspector, in the Spring section, enter 20 for the Strength. 


vz SPRING 


Strength: [20 |Damping: 0 


Giving a spring value to the first bone makes it sway back and forth with any 
motion of the entire armature. 


3 Choose Control > Test Movie > in Flash Professional to see your refinements to 


the motion of the buoy. 
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Now, as the buoy moves from left to right, it rocks as if floating on water. The 
flag and flag pole continue to sway. 


Adding damping effects 


Damping refers to how much the spring effect decreases with time. It wouldn’t 
be realistic if the rocking of the buoy or the swaying of the flag and the flag pole 
continues indefinitely. Over time, the swaying should lessen and eventually stop. 
You can set a damping value from 0 (no damping) to 100 (maximum damping) to 
control how rapidly these effects diminish. 


1 Select the first bone of the buoy (in the floating part), and in the Properties 
inspector, in the Spring section, enter 100 for the Damping. 
s7 SPRING 


Strength: 20 Damping: ft) 


The maximum damping value will decrease the rocking of the buoy over time. 


2 Continue to select each of the bones of the armature and enter the maximum 
value (100) for Damping. 


3 Choose Control > Test Movie > in Flash Professional to see the effects that the 
damping values have on the motion of your buoy. 


The buoy and the flag and flag pole still sway, but their motion quickly subsides 
after the initial starting motion and after the buoy stops at the far right side 

of the Stage. The damping values help add a sense of weight to the armature. 
Experiment with both the strength and damping values in the Spring section of 
your armature to get the most realistic motion. 
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Review Questions 


1 What are the two ways of using the Bone tool? 

What is the Bind tool used for? 

Define and differentiate these terms: a bone, a node, a joint, and an armature. 
What is a shape tween, and how do you apply it? 


What are shape hints, and how do you use them? 


a uu F&F WwW N 


What does strength and damping refer to in the Spring feature? 


Review Answers 


1 The Bone tool can connect movie clip instances together to form an articulated object 
that can be posed and animated with inverse kinematics. The Bone tool can also create 
an armature for a shape, which can be posed and animated with inverse kinematics 
as well. 


2 The Bind tool can redefine the connections between the control points of a shape and 
the bones of an armature. The connections between the control points and the bones 
determine how the shape reacts to the bending and rotations of the armature. 


3 Bones are the objects that connect individual movie clips together or that make up the 
internal structure of a shape for motion with inverse kinematics. A node is one of the 
movie clip instances that have been linked with the Bone tool. A node can be described 
in terms of its relationship with other nodes, such as parent, child, or sibling. Joints 
are the articulations between bones. Joints can rotate as well as translate (slide in both 
the x and y directions). Armatures refer to the complete articulated object. Armatures 
are separated on a special Pose layer on the Timeline where poses can be inserted for 
animation. 


4 A shape tween creates smooth transitions between keyframes containing different 
shapes. To apply a shape tween, create different shapes in an initial keyframe and in a 
final keyframe. Then select any frame between the keyframes in the Timeline, right- 
click/Ctrl-click, and select Create Shape Tween. 


5 Shape hints are labeled markers that indicate how one point on the initial shape of 
a shape tween will map to a corresponding point on the final shape. Shape hints 
help refine the way the shapes will morph. To use shape hints, first select the initial 
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keyframe of a shape tween. Choose Modify > Shape > Add Shape Hint. Move the first 
shape hint to the edge of the shape. Move the playhead to the final keyframe, and move 
the corresponding shape hint to a matching edge of the shape. 


6 Strength is the amount of springiness of any individual bone in an armature. Add 
springiness with the Spring feature to simulate the way different parts of a flexible 
object jiggle when the entire object moves and continue to jiggle when the object stops. 
Damping refers to how quickly the springiness effect subsides over time. 
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194 


CREATING INTERACTIVE 
NAVIGATION 


Lesson Overview 


In this lesson, you'll learn how to do the following: 


Create button symbols 

Add sound effects to buttons 

Duplicate symbols 

Swap symbols and bitmaps 

Name button instances 

Write ActionScript to create nonlinear navigation 

Use the Code Snippets panel to quickly add interactivity 
Create and use frame labels 


Create animated buttons 


This lesson will take approximately three hours to complete. If needed, 
remove the previous lesson folder from your hard drive and copy the 
Lesson06 folder onto it. 


BEST of MERIDIEN 


PRODUCED BY LOCAL MAGAZINE 


Let your viewers explore your site and become active 
participants. Button symbols and ActionScript work 
together to create engaging, user-driven, interactive 
experiences. 


Got wild finicky kids? Head 
to N Piatto for kid-friendly 
Italian fun! 


Quo a |) 


Getting Started 


To begin, view the interactive restaurant guide that you'll create as you learn to 
make interactive projects in Flash. 


1 Double-click the 06End.swf file in the Lesson06/06End folder to play the 
animation. 


The project is an interactive restaurant guide for a fictional city. Viewers can 
click any button to see more information about a particular restaurant. In this 
lesson, you'll create interactive buttons and structure the Timeline properly. 
You'll learn to write ActionScript to provide instructions for what each button 
will do. 


2 Close the 06End.swf file. 


3 Double-click the 06Start.fla file in the Lesson06/06Start folder to open the initial 
project file in Flash. The file includes several assets already in the Library panel, 
and the Stage has already been sized properly. 


4 Choose File > Save As. Name the file 06_workingcopy.fla and save it in the 
06Start folder. Saving a working copy ensures that the original start file will be 
available if you want to start over. 


About Interactive Movies 


Interactive movies change based on the viewer’s actions. For example, when the 
viewer clicks a button, a different graphic with more information is displayed. 
Interactivity can be simple, such as a button click, or it can be complex, receiving 
inputs from a variety of sources, such as the movements of the mouse, key presses 
from the keyboard, or even data from databases. 


In Flash, you use ActionScript to achieve most interactivity. ActionScript provides 
the instructions that tell each button what to do when the user clicks one of them. 
In this lesson, you'll learn to create a nonlinear navigation—one in which the movie 
doesn’t have to play straight from the beginning to the end. ActionScript can tell 
the Flash playhead to jump around and go to different frames of the Timeline based 
on which button the user clicks. Different frames on the Timeline contain different 
content. The user doesn’t actually know that the playhead is jumping around the 
Timeline: The user just sees (or hears) different content appear as the buttons are 
clicked on the Stage. 
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Creating Buttons 


A button is the visual indicator of what the user can interact with. The user usually 
clicks a button, but many other types of interactions are possible. For example, 
something can happen when the user rolls the mouse over a button. 


Buttons are a kind of symbol that have four special states, or keyframes, that 
determine how the button appears. Buttons can look like virtually anything—an 
image, graphic, or a bit of text—they don’t have to be those typical pill-shaped, gray 
rectangles that you see on many Web sites. 


Creating a button symbol 


In this lesson, you'll create buttons with small thumbnail images and restaurant 
names. A button symbol’s four special states include: 


e Upstate. Shows the button as it appears when the mouse is not interacting 
with it. 


e Over state. Shows the button as it appears when the mouse is hovering over the 
button. 


e Down state. Shows the button as it appears when the mouse button is 
depressed. 


e Hit state. Indicates the clickable area of the button. 


You'll understand the relationship between these states and the button appearance 
as you work through this lesson. 


1 Choose Insert > New Symbol. 


2 Inthe Create New Symbol dialog box, select Button and name the symbol gabel 
loffel button. Click OK. 


Create New Symbol 


Name: | gabe! loffel button 


Type: | Button lv Cancel 


Folder: Library root 


Advanced * 


3 Flash brings you to symbol-editing mode for your new button. 
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4 In the Library panel, expand the folder called restaurant thumbnails and drag 
the graphic symbol gabel loffel thumbnail to the middle of the Stage. 


SG 6 


06_workingcopy.fla 


100 items 
Name aj Linkage|| 
> ia] _imported image assets 
> ia] _imported photo assets 
background 
> B bitmaps 
4 gabel loffel button 
logo 
> [Ø restaurant content 
> øp restaurant previews 
v 24 restaurant thumbnails 
iiae [E] gabel loffel thumbnail 
o gary gari thumbnail 
[E] il piatto thumbnail 
a pierre platters thumbnail 
E] title graphic 


5 In the Properties inspector, set the X value to 0 and the Y value to 0. 


The upper-left corner of the small gabel loffel restaurant image is now aligned to 
the center point of the symbol. 


6 Select the Hit frame in the Timeline and choose Insert > Timeline > Frame to 
extend the Timeline. 


The gabel loffel image now extends through the Up, Over, Down, and Hit states. 


S @O Up Over Down 


7 Insert a new layer. 
8 Select the Over frame and choose Insert > Timeline > Keyframe. 


A new keyframe is inserted in the Over state of the top layer. 


Q Layer 1 
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9 In the Library panel, expand the folder called restaurant previews, and drag the 


movie clip symbol called gabel loffel over info to the Stage. 


06_workingcopy.fla 


Get our your Lederhosen! 


© more 


100 items Fe) 
Name 
> 2 _imported image assets 
> ø] _imported photo assets 
background 
>» @ bitmaps 
# gabel loffel button 
logo 
> [E restaurant content 
v 24 restaurant previews 
gabel loffel over info 
[E gary gari over info 
[E] il piatto over info 
© pierre platters over info 
v & restaurant thumbnails 
[E] gabel loffel thumbnail 
[E] gary gari thumbnail 
E] il piatto thumbnail 
a & pierre platters thumbnail 


10 In the Properties inspector, set the X value to 0 and the Y value to 215. 


The gray information box will appear over the restaurant image whenever the 
mouse cursor rolls over the button. 


11 Insert a third layer above the first two. 


12 Select the Down frame on the new layer and choose Insert > Timeline > 
Keyframe. 


A new keyframe is inserted in the Down state of the new layer. 


" Layer 3 
q Layer 2 + - 
@ Layer 1 . iO 
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13 Drag the sound file called clicksound.mp3 from the Library panel to the Stage. 


06_workingcopy.fla 


101 items e o o ë] 
Name “| Linkage 
> ia] _imported image assets 
> P _imported photo assets 

background 
> bitmaps 

KÉ clicksound.mp3 

ium) gabel loffel button 

logo 


> øP restaurant content 


@ Note: You'll learn 14 Select the Down keyframe where the sound form appears, and in the Properties 
more about sound in inspector, make sure that Sync is set to Event. 

Lesson 8, “Working with 

Sound and Video.” 


PROPERTIES 


sz LABEL 


Name: | 


Type: ly 


sz SOUND 


Name: | clicksound.mp3 |v 
Effect: 2? 


Start 
Stop 


Stream 


A clicking sound will play only when a viewer depresses the button. 
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15 Click Scene 1 above the Stage to exit symbol-editing mode and return to the 
main Timeline. Your first button symbol is complete! Look in your Library 
panel to see the new button symbol stored there. 


06_workingcopy.fla ly| = Ge 


101 items 


Name | Linkage! 
> a] _imported image assets 
» {@ _imported photo assets 
background 
>» {E bitmaps 
KÉ clicksound.mp3 
ium) gabel loffel button 
logo 


> P restaurant content 


Invisible Buttons and 
the Hit Keyframe 


Your button symbol’s Hit keyframe indicates the area that is “hot,” or clickable, 

to the user. Normally, the Hit keyframe contains a shape that is the same size and 
location as the shape in your Up keyframe. In most cases, you want the graphics 
that users see to be the same area where they click. However, in certain advanced 
applications, you may want the Hit keyframe and the Up keyframe to be different. If 
your Up keyframe is empty, the resulting button is known as an invisible button. 


Users can’t see invisible buttons, but because the Hit keyframe still defines a click- 
able area, invisible buttons remain active. So, you can place invisible buttons over 
any part of the Stage and use ActionScript to program them to respond to users. 
Invisible buttons are useful for creating generic hotspots. For example, placing 
them on top of different photos can help you make each photo respond to a mouse 
click without having to make each photo a different button symbol. 
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202 


Duplicating buttons 


Now that you've created one button, others will be easier to create. You'll duplicate 
one button here, change the image in the next section, and then continue to dupli- 
cate buttons and modify images for the remaining restaurants. 


1 Inthe Library panel, right-click/Ctrl-click the gabel loffel button symbol and 
select Duplicate. You can also click the options menu at the top-right corner of 
the Library panel and select Duplicate. 


06_workingcopy.fla ly] a & 
ss 


101 items fe) 
| Name aj Linkage 
| d ia] _imported image assets | 
|» f _imported photo assets | 
| background | 
| 


|> BP bitmaps 
KÉ clicksound.mp3 

| 0 abel loff ===- 

| logo t 

|> f restauran 

|» & restaurar 


Copy 
Paste 


gabel 
gary ¢ 


U Duplicate 
pierre Move to... 


v & restauran 


gabel 


Rename 
Delete 


2 Inthe Duplicate Symbol dialog box, select Button, and name it gary gari 
button. Click OK. 


Duplicate Symbol 
Name: | gary gari button 
Type: | Button lv Cancel 
Folder: Library root 
Advanced > 
Swapping bitmaps 


Bitmaps and symbols are easy to swap on the Stage and can significantly speed up 


your workflow. 


1 Inthe Library panel, double-click the icon for your newly duplicated symbol 
(gary gari button) to edit it. 


LESSON 6 Creating Interactive Navigation 


2 Select the restaurant image on the Stage. 


3 In the Properties inspector, click Swap. 


(e) Graphic |v 
Instance of: gabel loffel thumb... CEE 
s7 POSITION AND SIZE 


X: 0:00, Y: 0:00. 


© W: 174,00 H: 341.00 
sz COLOR EFFECT 


Style: 


4 Inthe Swap Symbol dialog box, select the next thumbnail image, called gary gari 


thumbnail, and click OK. 


ae are 
logo 

> [E restaurant content 

> a) restaurant previews 

x y {EY restaurant thumbnails 

@ [F] gabel loffel thumbnail 

(al [E] gary gari thumbnail _, 
[E] il piatto thumbnail r 
[E] pierre platters thumbnail 

[E] title graphic 


Cancel 


The original thumbnail (shown with a black dot next to the symbol name) is 
swapped for the one you selected. Because they are both the same size, the 


replacement is seamless. 


5 Now select the Over keyframe and click the gray information box on the Stage. 
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6 In the Properties inspector, click Swap and swap the selected symbol with the 
symbol called gary gari over info. 


The instance in the Over keyframe of your button is replaced with one that 
is appropriate for the second restaurant. Since the symbol was duplicated, all 
other elements, such as the sound in the top layer, remain the same. 


The delicious headquarters 
for all your ginger-related 
needs! fe] 


(O 


7 Continue duplicating your buttons and swapping the two instances inside 
them until you have four different button symbols in your Library panel, each 
representing a different restaurant. When yov’re done, it’s a good idea to 
organize all your restaurant buttons in a folder in your Library panel. 


| 06_workingcopy.fla 
= 


105 items fe) 
Name < | Linkage 
> ia] _imported image assets 
> BP _imported photo assets 
background 
> ia] bitmaps 
KÉ clicksound.mp3 
logo 
v E restaurant buttons 
Q gabel loffel button 
ium) gary gari button 
fia] il piatto button 
im) pierre platters button 
> P restaurant content 


> f restaurant previews 
> i] restaurant thumbnails 
[E] title graphic 
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Placing the button instances 


The buttons need to be put on the Stage and given names in the Properties inspec- 
tor so that ActionScript can refer to them. 


1 On the main Timeline, insert a new layer and rename it buttons. 


ao 
oe 
@ title ‘àm 
@ background „àu 


2 Drag each of your buttons from the Library panel to the middle of the Stage, 
placing them in a horizontal row. Don’t worry about their exact position 
because you'll align them nicely in the next few steps. 


PRODUCED BY LOCAL MAGAZINE 


3 Select the first button, and in the Properties inspector, set the X value to 100. 
4 Select the last button, and in the Properties inspector, set the X value to 680. 


5 Select all four buttons. In the Align panel (Window > Align), deselect the Align 
to stage option, click the Space Evenly Horizontally button, and then click the 
Align Top Edge button. 


All four buttons are now evenly distributed and aligned horizontally. 


Align Top Edge 


ALIGN ie 


Align: 
e gd Peh 


Distribute: 


= Sa hb ay 
Match size: Space: 
g i gs G Space Evenly 


Horizontally 
C] Align to stage 


Align to stage deselected 
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6 With all the buttons still selected, in the Properties inspector, enter 170 for the 
Y value. 


All four buttons are positioned on the Stage correctly. 


7 You can now test your movie to see how the buttons behave. Choose Control > 
Test Movie > in Flash Professional. Note how the gray information box in the 
Over keyframe appears when your mouse hovers over each button, and how the 
clicking sound is triggered when you depress your mouse over each button. At 
this point, however, you haven’t provided any instructions for the buttons to 
actually do anything. That part comes after you name the buttons and learn a 
little about ActionScript. 
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Naming the button instances 


Name each button instance so that it can be referenced by ActionScript. This is a 
crucial step that many beginners forget to do. 


1 Click on an empty part of the Stage to deselect all the buttons, and then select 
just the first button. 


2 Type gabelloffel_btn in the Instance Name field in the Properties inspector. 


PROPERTIES 


B gabelloffel_btn (a 
Button lv 
Instance of: gabel loffel button Swap... 


x7 POSITION AND SIZE 


X: 100.00 Y: 179.00 


= W: 174,00 H: 341.00 


s7 COLOR EFFECT 


Style: | None v 


3 Name each of the other buttons garygari_btn, ilpiatto_btn, and 
pierreplatters_btn. 


Make sure that you use all lowercase letters, leave no spaces, and double-check 
the spelling of each button instance. Flash is very picky and one typo will 
prevent your entire project from working correctly! 


4 Lock all the layers. 
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Naming Rules 


Naming instances is a critical step in creating interactive Flash projects. The most 
common mistake made by novices is not to name, or to incorrectly name, a button 
instance. 


The instance names are important because ActionScript uses the names to refer- 
ence those objects. Instance names are not the same as the symbol names in the 
Library panel. The names in the Library panel are simply organizational reminders. 


Instance naming follows these simple rules: 

1 Do not use spaces or special punctuation. Underscores are okay to use. 

2 Donot begin a name with a number. 

3 Be aware of uppercase and lowercase letters. Instance names are case sensitive. 


4 End your button name with _btn. Although it is not required, it helps identify 
those objects as buttons. 


5 Donot use any word that is reserved for a Flash ActionScript command. 


Understanding ActionScript 3.0 


Adobe Flash Professional CS5 uses ActionScript 3.0, a robust scripting language, to 
extend the functionality of Flash. Although ActionScript 3.0 may seem intimidating 
to you if you're new to scripting, you can get great results with some very simple 
scripts. As with any language, it’s best if you take the time to learn the syntax and 
some basic terminology. 


About ActionScript 


ActionScript, which is similar to JavaScript, lets you add more interactivity to Flash 
animations. In this lesson, you'll use ActionScript to attach behaviors to buttons. 
You'll also learn how to use ActionScript for such simple tasks as stopping an 
animation. 


You don’t have to be a scripting expert to use ActionScript. In fact, for common 
tasks, you may be able to copy script that other Flash users have shared. And new 
to CS5 is the Code Snippets panel, which provides an easy way to add ActionScript 
to your project or share ActionScript code among developers. 


However, you'll be able to accomplish much more in Flash—and feel more confi- 
dent using the application—if you understand how ActionScript works. 
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This lesson isn’t designed to make you an ActionScript expert. Instead, it intro- 
duces common terms and syntax, walks you through a simple script, and provides 
an introduction to the ActionScript language. 


If you’ve used scripting languages before, the documentation included in the Flash 
Help menu may provide additional guidance you need to use ActionScript profi- 
ciently. If you’re new to scripting and want to learn ActionScript, you may find an 
ActionScript 3.0 book for beginners helpful. 


Understanding scripting terminology 


Many of the terms used in describing ActionScript are similar to terms used for 
other scripting languages. The following terms are used frequently in ActionScript 
documentation. 


Variable 


A variable represents a specific piece of data that may or may not be constant. 
When you create, or declare, a variable, you also assign a data type, which deter- 
mines what kind of data the variable can represent. For example, a String variable 
holds any string of alphanumeric characters, whereas a Number variable must 
contain a number. 


Keyword 


In ActionScript, a keyword is a reserved word that is used to perform a specific task. 


For example, var is a keyword that is used to create a variable. 


You can find a complete list of keywords in Flash Help. Because these words are 
reserved, you can’t use them as variable names or in other ways. ActionScript 
always uses them to perform their assigned tasks. As you enter ActionScript in the 
Actions panel, keywords will turn a different color. This is a great way to know if a 
word is reserved by Flash. 


Arguments 


Arguments provide specific details for a particular command and are the 
values between parentheses () in a line of code. For example, in the code 
gotoAndP lay (3); the argument instructs the script to go to frame 3. 


Function 


A function is a group of statements that you can refer to by name. Using a function 
makes it possible to run the same set of statements without having to type them 
repeatedly. 


® Note: Variable names 
must be unique, and 
they are case sensitive. 
The variable mypassword 
is not the same as the 
variable MyPassword. 
Variable names can 
contain only numbers, 
letters, and underscores; 
they cannot begin with 

a number. These are 

the same naming rules 
for instances. (In fact, 
variables and instances 
are conceptually the 
same.) 
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Objects 


In ActionScript 3.0, you work with objects, which are abstract types of data that 
help you do certain tasks. A Sound object, for example, helps you control sound, 
and a Date object can help you manipulate time-related data. The button symbols 
that you created earlier in this lesson are also objects—they are Button objects. 


Every object should be named. An object that has a name can be referenced and 
controlled with ActionScript. Buttons on the Stage are referred to as instances, and 
in fact, instances and objects are synonymous. 


Methods 


Methods are the keywords that result in action. Methods are the doers of 
ActionScript, and each kind of object has its own set of methods. Much of learn- 
ing ActionScript is learning the methods for each kind of object. For example, two 
methods associated with a MovieClip object are stop() and gotoAndPlay(). 


Properties 


Properties describe an object. For example, the properties of a movie clip include its 
height and width, x and y coordinates, and scale. Many properties can be changed, 
whereas other properties can only be “read,” meaning they simply describe the object. 


Using proper scripting syntax 


If you’re unfamiliar with program code or scripting, ActionScript code may be chal- 
lenging to decipher. Once you understand the basic syntax, which is the grammar 
and punctuation of the language, you'll find it easier to follow a script. 


e The semicolon at the end of the line tells ActionScript that it has reached the 
end of the code line and to go to the next line in the code. 


e Asin English, every open parenthesis must have a corresponding close 
parenthesis, and the same is true for brackets and curly brackets. If you open 
something, you must close it. Very often, the curly brackets in ActionScript 
code will be separated on different lines. This makes it easier to read what’s 
inside the curly brackets. 


e The dot operator (.) provides a way to access the properties and methods of an 
object. Type the instance name, followed by a dot, and then the name of the 
property or method. Think about the dot as a way to separate objects, methods, 
and properties. 


e Whenever you're entering a string or the name of a file, use quotation marks. 


e You can add comments to remind you or others of what you are accomplishing 
with different parts of the script. To add a comment for a single line, start it 
with two slashes (//). To type a multiline comment, start it with /* and end it 
with */. Comments are ignored by Flash and won't affect your code at all. 


210 LESSON 6 Creating Interactive Navigation 


Flash provides assistance in the following ways as you write scripts in the Actions 


panel: 


e Words that have specific meanings in ActionScript, such as keywords and 
statements, appear in blue as you type them in the Actions panel. Words that 
are not reserved in ActionScript, such as variable names, are in black. Strings 
are in green. Comments, which ActionScript ignores, are in gray. 


e As you work in the Actions panel, Flash detects the action you are entering and 
displays a code hint. There are two types of code hints: a tooltip that contains 
the complete syntax for that action and a pop-up menu that lists possible 


ActionScript elements. 


e To check the syntax of a script you’re writing, click the Check Syntax icon 
( ~ ). Syntax errors are listed in the Compiler Errors panel. 


You can also click the AutoFormat icon ( 


= ) (which will also format the script 


according to conventions so that it is easier for others to read). 


Navigating the Actions panel 


The Actions panel is where you write all your code. Open the Actions panel by 
choosing Window > Actions or by selecting a keyframe on the Timeline and click- 
ing the ActionScript panel icon ( @ ) on the top right of the Properties inspector. 
You can also right-click/Ctrl-click on any keyframe and select Actions. 


The Actions panel gives you quick access to the core elements of ActionScript as 
well as provides you with different options to help you write, debug, format, edit, 


and find your code. 


ACTIONS - FRAME 


| ActionScript 3.0 i) GEA © ZG 


ActionScript version 


(Æ Top Level 


Actions 


toolbox 


Script 
navigator 


a ArgumentError 
(a) arguments 
E] Array 


E Boolean 
Methods 


(aJ Properties 
@ constructor 
@ prototype ( 
A Date 


A] DefinitionError 


E] Error 


T 


A| Current Selection 
l Layer 2 : Frame 1 


6 Scene 1 


4 Symbol Definition(s) 


a Tam | 


Script pane 


Options 


OOOH 


(F| Code Snippets Ţ ® 


Line 1 of 1, Col 1 
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The Actions panel is divided into several panes. At the top-left corner is the Actions 
toolbox, which contain categories that organize all the ActionScript code. At the 
top of the Actions toolbox is a pull-down menu that displays only the code for the 
version of ActionScript you select. You should select ActionScript 3.0, the latest 
version. At the very bottom of the Actions toolbox categories is a yellow Index 
category that lists, in alphabetical order, all the language elements. You don’t need 
to use the toolbox to add code to your script, but it can help to ensure that you’re 
using the code correctly. 


At the top right of the Actions panel is the Script pane—the blank slate in which all 
your code appears. You enter ActionScript in the Script pane just as you would in a 
text-editing application. 


At the bottom left of the Actions panel is the Script navigator, which can help 
you find a particular piece of code. ActionScript is placed on keyframes on the 
Timeline, so the Script navigator can be particularly useful if you have lots of code 
scattered in different keyframes and on different Timelines. 


All the panes in the Actions panel can be resized to suit your working style. They 
can even be collapsed completely to maximize the pane that you are working in. To 
resize a pane, click and drag the horizontal or vertical dividers. 


Preparing the Timeline 


Every new Flash project begins with just a single frame. To create room on the 
Timeline to add more content, you'll have to add more frames to all your layers. 


1 Select a later frame in the top layer. In this example, select frame 50. 


Y title 
@ background 


2 Choose Insert > Timeline > Frame (F5). You can also right-click/Ctrl-click and 
choose Insert Frame. 


Flash adds frames in the top layer up to the selected point, frame 50. 
TimeLine | OUTPUT | compner errors | MoTION EDITOR | 


q title - a, 
@ background - a, 
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3 Select frame 50 in the other two layers and insert frames up to the selected 
frame. 


All your layers have 50 frames on the Timeline. 


meone Lourpur | compuerennors | monioweprron | 


1 5 10 15 2 2 30 35 40 45 


@ buttons 
q title 
= background 


Adding a Stop Action 


Now that you have frames on the Timeline, your movie will play linearly from 
frame 1 to frame 50. However, with this interactive restaurant guide, you'll want 
your viewers to choose a restaurant to see in whichever order they choose. So you'll 
need to pause the movie at the very first frame to wait for your viewer to click a 
button. You use a stop action to pause your Flash movie. A stop action simply stops 
the movie from continuing by halting the playhead. 


1 Insert a new layer at the top and rename it actions. 


riwcune LUM | comueR ennons | MoTioNsDrTOR | 


sad. 5 10 15 


q buttons “au. 
Y title . à Eu. 
@ background “au. 


2 Select the first keyframe of the actions layer and open the Actions panel 
(Window > Actions). 


3 Inthe Script pane, type stopQ ; 


Re Ove GCKUBFY OD 
1 stopQ); 


The code appears in the Script pane and a tiny lowercase “a” appears in the first 
keyframe of the actions layer to indicate it contains some ActionScript. The 


movie will now stop at frame 1. 


riveune [OUTPUT | couper ERRORS | morioneoiror || 


@ buttons -. à EHe 
q title . â E. 
@ background -ìà E. 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 213 


Creating Event Handlers for Buttons 


Events are occurrences that happen in the Flash environment that Flash can detect 
and respond to. For example, a mouse click, a mouse movement, and a key press on 
the keyboard are all events. These events are produced by the user, but some events 
can happen independently of the user, like the successful loading of a piece of data 
or the completion of a sound. With ActionScript, you can write code that detects 
events and respond to them with an event handler. 


The first step in event handling is to create a listener that will detect the event. 
A listener looks something like this: 


wheretolisten.addEventListener(whatevent, responsetoevent) ; 


The actual command is addEventListener(). The other words are placeholders 
for objects and parameters for your situation. Wheretolisten is the object where the 
event occurs (usually a button), whatevent is the specific kind of event (such as a 
mouse click), and responsetoevent is the name of a function that is triggered when 
the event happens. So if you want to listen for a mouse click over a button called 
btn1_btn, and the response is to trigger a function called showimagel, the code 
would look like this: 


btnl_btn.addEventListener(MouseEvent.CLICK, showimagel1) ; 


The next step is to create the function that will respond to the event—in this case, 
the function called showimage1. A function simply groups a bunch of actions 
together; you can then trigger that function by referencing its name. A function 
looks something like this: 


function showimagel (myEvent:MouseEvent){ }; 


Function names, like button names, are arbitrary. You can name functions what- 
ever makes sense to you. In this particular example, the name of the function is 
showimagel1. It receives one parameter (within the parentheses) called myEvent, 
which is an event that involves the mouse. The item following the colon indicates 
what type of object it is. If this function is triggered, all the actions between the 
curly brackets are executed. 


Adding the event listener and function 


You'll add ActionScript code to listen for a mouse click on each button. The 
response will make Flash go to a particular frame on the Timeline to show different 
content. 


1 Select the first frame of the actions layer. 


2 Open the Actions panel. 
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3 In the Script pane of the Actions panel, beginning on the second line, type 


gabelloffel_btn.addEventListener (MouseEvent.CLICK, 
restaurantl) ; 


ACTIONS - FRAME 


ePOvVEGRUSFOOCH (iF Code Snippets] 4 @ 


1 stopO; 
2 gabelloffel_btn.addEventListener(MouseEvent.CLICK, restaurant1);| 


The listener listens for a mouse click over the gabelloffel_btn object on the 
Stage. If the event happens, the function called restaurant] is triggered. 


On the next line of the Script pane, type 


function restaurantl(event:MouseEvent):void { 
gotoAndStop(10) ; 


RA OVEOCRUSF OOOH («Code Snippets; A @ 


stop(); 
gabelloffel_btn. addEventListener(MouseEvent.CLICK, restauranti); 


1 
2 
3 function restaurantiCevent:MouseEvent):void { 
4 gotoAndStop(10); 

>} 


The function called restaurant1 contains instructions to go to frame 10 and stop 
there. The code for your button called gabelloffel_btn is complete. 


Mouse Events 


The following list contains the ActionScript codes for common mouse events. Use 
these codes when you create your listener, and make sure that you pay attention 

to lowercase and uppercase letters. For most users, the first event (MouseEvent. 
CLICK) will be sufficient for all projects. That event happens when the user clicks 

the mouse button. 


e MouseEvent.CLICK 

e MouseEvent.MOUSE_MOVE 
e MouseEvent.MOUSE_DOWN 
e MouseEvent.MOUSE_UP 

e MouseEvent.MOUSE_OVER 
e MouseEvent.MOUSE_OUT 
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@ Note: Be sure 5 On the next line of the Script pane, enter additional code for the remaining 


to include the final three buttons. You can copy and paste lines 2 through 5, and simply change 
curly bracket for each 


function, or the code 
won't work. destination frame. The full script should be as follows: 


stopQ; 

gabelloffel_btn.addEventListener (MouseEvent.CLICK, 
restaurantl) ; 

function restaurantl(event:MouseEvent):void { 
gotoAndStop (10) ; 

} 

garygari_btn.addEventListener (MouseEvent.CLICK, restaurant2) ; 
function restaurant2(event:MouseEvent):void { 
gotoAndStop(20) ; 

} 

ilpiatto_btn.addEventListener(MouseEvent.CLICK, restaurant3) ; 

function restaurant3(event:MouseEvent):void { 
gotoAndStop (30) ; 

} 

pierreplatters_btn.addEventListener(MouseEvent.CLICK, 
restaurant4) ; 

function restaurant4(event:MouseEvent):void { 
gotoAndStop (40) ; 

} 


the names of the button, the name of the function (in two places), and the 


ActionScript Commands 
for Navigation 


The following list contains the ActionScript codes for common navigation com- 
mands. Use these codes when you create buttons to stop the playhead, start 
the playhead, or move the playhead to different frames. The gotoAndStop and 
gotoAndP lay commands require additional information, or parameters, within 
their parentheses as indicated. 


e stopQ; 

e playO; 

e gotoAndStop(framenumber or "framelabel"); 
e gotoAndPlay(framenumber or "framelabel"); 
e nextFrame(); 


e prevFrameQ); 


216 LESSON 6 Creating Interactive Navigation 


Checking syntax and formatting code 


ActionScript can be very picky, and a single misplaced period can cause your entire 
project to grind to a halt. Fortunately, the Actions panel provides a few tools to 
help you identify errors and help you fix them. 


1 Select the first frame of your actions layer and open the Actions panel if it is not 
already open. 


2 Click the Check Syntax button at the top of the Actions panel. 


Flash checks the syntax of your ActionScript code. In the Compiler Errors 
panel (Window > Compiler Errors), Flash notifies you if there are errors or if 
your code is error free. You should get 0 Errors and 0 Warnings if your code 
is correct. 


| TIMELINE | OUTPUT | COMPILER ERRORS | MOTION EDITOR | | 


Location | Description 


@ OError(s) _!\ 0 Warning(s) 


3 Click the AutoFormat icon at the top of the Actions panel. 


Flash formats your code so it conforms to standard spacing and line breaks. 


Creating Destination Keyframes 


When the user clicks each button, Flash moves the playhead to a new spot on 

the Timeline according to the ActionScript instructions you just programmed. 
However, you haven’t yet placed anything different at those particular frames. 

That’s the next step. 


Inserting keyframes with different content 


You will create four keyframes in a new layer and place information about each of 
the restaurants in the new keyframes. 


@ Note: Change the 
automatic formatting 
by selecting Preferences 
from the upper-right 
options menu. Choose 
Auto Format from the 
left menu and select 
the various options for 
formatting your code. 
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1 Insert a new layer at the top of the layer stack but below the actions layer and 
rename it content. 


@ actions + » BS 

o 
@ buttons -à E. 
q title . àE. 
@ background -au. 


dog Mie maa 240 


2 Select frame 10 of the content layer. 


3 Insert a new keyframe at frame 10 (Insert > Timeline > Keyframe, or F6). 


@ actions 

“1 content 

@ buttons 

q title 

@ background 


4 Insert new keyframes at frames 20, 30, and 40. 


Your Timeline has four empty keyframes in the content layer. 


J actions 
“1 content 
@ buttons 
q title 

@ background 


5 Select the keyframe at frame 10. 
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6 In the Library panel, expand the folder called restaurant content. Drag the 
symbol called gabel and loffel from the Library panel to the Stage. The symbol 
named gabel and loffel is a movie clip symbol that contains a photo, graphics, 
and text about the restaurant. 


É scene 1 & @ mox [=>] 


MeO TAU RAAN] 
PRODUCED BY LOCAL MAGAZINE 


a 
ae 


GABEL AND LOFFEL 


2335 GLENDALE AVE. CATEGORY : SWISS 
MERIDIEN CITY OPEN :10 AM. - 10 PM. 
T:490 49 4900 PRICE : $$$ 

W :GANDG.RES 


Malesuada quis, egestas quis wisi. Donec ac sapien. Ut 
ofti duis ultricies, metus a feugiat porttitor, dolor mauris 
convallis est, quis mattis lacus ligula eu augue. Sed 
facilisis morbi mi, tristique vitae, sodales eget, hendrerit 
sed, erat lorem ipsum dolor. 


Vestibulum eget purus vitae eros ornare adipiscing. 


@ buttons 
q title 
q background 


7 Inthe Properties inspector, set the X value to 60 and the Y value to 150. 


The restaurant information about gabel and loffel is centered on the Stage and 
covers all the buttons. 


8 Select the keyframe at frame 20. 
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9 Drag the symbol called gary gari from the Library panel to the Stage. The symbol 
named gary gari is another movie clip symbol that contains a photo, graphics, 
and text about this restaurant. 


6 Scene 1 & @ 100% ie) 


BEST of MERIDIEN 


NT GUIDE 


GARY GARI 


76 NO.HIGHLAND AVE. CATEGORY : JAPANESE 
MERIDIEN CITY OPEN :5SPM. - 10 PM. 
T :490 24 6709 PRICE :$$ 

W : GARYGARI.RES 


Metus a feugiat porttitor, dolor mauris convallis est, quis 
mattis lacus ligula eu augue. Sed facilisis morbi mi, 
tristique vitae, sodales eget, hendrerit sed, erat lorem 
ipsum dolor. 


Malesuada quis, egestas quis wisi. Donec ac sapien. Ut 
orci duis ultricies, mestibulum eget purus vitae eros 
ornare adipiscing. 


W actions 

“1 content 

@ buttons 

@ title 

q background 


10 In the Properties inspector, set the X value to 60 and the Y value to 150. 


11 Place each of the movie clip symbols from the restaurant content folder in the 
Library panel to the corresponding keyframes in the content layer. 


Each keyframe should contain a different movie clip symbol about a restaurant. 


Using labels on keyframes 


Your ActionScript code tells Flash to go to a different frame number when the user 
clicks each of the buttons. However, if you decide to edit your Timeline and add or 
delete a few frames, you'll need to go back into your ActionScript and change your 
code so the frame numbers match. 


An easy way to avoid this problem is to use frame labels instead of fixed frame 
numbers. Frame labels are names that you give to keyframes. Instead of referring 
to keyframes by their frame number, you refer to them by their label. So, even 

if you move your destination keyframes as you edit, the labels remain with their 
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keyframes. To reference frame labels in ActionScript, you must enclose them in 
quotation marks. The command gotoAndStop("label1") makes the playhead go 
to the keyframe with the label called label1. 


1 Select frame 10 on the content layer. 


2 Inthe Properties inspector, enter label1 in the Label Name field. 


Name: | None lv 

Effect: | None izu 2 

Sync: | Event ly 
Repeat Liza)! x ıl 


No sound selected 


A tiny flag icon appears on each of the keyframes that have labels. 


riveune Lumpur | commen emmons | moniow eprom  — = >o 


15 20 25 30 35 40 45 50 


NEE EAE EE E E eee 


q actions 
“1 content 
@ buttons 
@ title au. 
q background aun. 


3 Select frame 20 on the content layer. 
4 In the Properties inspector, enter label2 in the Label Name field. 


5 Select frames 30 and 40, and in the Properties inspector, enter corresponding 
names in the Label Name field: label3 and label4. 


A tiny flag icon appears on each of the keyframes that have labels. 


mutune Lumpur | commer emmons | wononeoroe| — — ooo 


Sado. 5 10 1 20 2 30 35 40 45 


q actions 
= content 
@ buttons 
@ title a 
@ background a 


6 Select the first frame of the actions layer and open the Actions panel. 
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7 In your ActionScript code, change all the fixed frame numbers in each of the 
gotoAndStop() commands to the corresponding frame labels: 


e gotoAndStop(10) ; should be changed to gotoAndStop("label1") ; 
e gotoAndStop(20) ; should be changed to gotoAndStop("label2") ; 
e gotoAndStop(30) ; should be changed to gotoAndStop("label3") ; 
e gotoAndStop(40) ; should be changed to gotoAndStop("label4") ; 


ACTIONS - FRAME 


RPP Ov ÖBO (Fl Code Snippets; “Q © 
1 stopd); 
2 gabelloffel_btn.addEventListener(MouseEvent.CLICK, restauranti); 
3 function restauranti(event:MouseEvent):void { 
< gotoAndStop(" label1"); 
>} 
6 garygari_btn.addEventListener(MouseEvent.CLICK, restaurant2); 
7 function restaurant2(event :MouseEvent):void { 
8 gotoAndStop(" label2"); 
9 


|} 10 ilpiatto_btn.addEventListener(MouseEvent.CLICK, restaurant3); 
| 11 function restaurant3(Cevent:MouseEvent):void { 

12 gotoAndStop(" Label3"); 

3 6} 

14 +pierreplatters_btn.addEventListener(MouseEvent.CLICK, restaurant4); 
15 function restaurant4(event:MouseEvent):void { 

16 gotoAndStop(" label4"); 

37 3} 


The ActionScript code now directs the playhead to a particular frame label 
instead of a particular frame number. 


8 Test your movie by choosing Control > Test Movie > in Flash Professional. 


Each button moves the playhead to a different labeled keyframe on the 
Timeline, where a different movie clip is displayed. The user can choose to see 
any restaurant in any order. However, since the restaurant information covers 
the buttons, you can’t return to the original menu screen to choose another 
restaurant. You'll need to provide another button to return to the first frame, 
which you'll do in the next section. 


Creating a Home Button 


A home button simply makes the playhead go back to the first frame of the 
Timeline, or to a keyframe where an original set of choices, or the main menu, are 
presented to the viewer. Creating a button that goes to frame 1 is the same process 
as creating the four restaurant buttons. However, in this section, you'll learn to use 
the new Code Snippets panel to add ActionScript to your project. 
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Adding another button instance 
A home, or main menu, button is provided for you in the Library panel. 
1 Select the Buttons layer and unlock it if it is locked. 


2 Drag the button called mainmenu from the Library panel to the Stage. Position 
the button instance at the top-right corner. 


RESTAURAN] 


hike 


PRODUCED BY LOCAL MAGAZINE 


3 Inthe Properties inspector, set the X value to 726 and the Y value to 60. 


Using the Code Snippets panel to add ActionScript 


The Code Snippets panel provides commonly used ActionScript code for you to 
easily add simple interactivity to your Flash project. If you are unsure of coding 
your own buttons, you can use the Code Snippets panel to learn how to add inter- 
activity. You can also save, import, and share code between a team of developers to 
make the development and production process more efficient. 


1 Choose Window > Code Snippets, or if your Actions panel is already open, click 
the Code Snippets button ( ¢}1Code Snippets _) at the top right of the Actions panel. 


The Code Snippets panel appears. The code snippets are organized in folders 
that describe their function. 


CODE SNIPPETS | COMPONENTS | MOTIO 


> Actions 


> (Timeline Navigation 


> (a Animation 


> © Load and Unload 
> © Audio and Video 


> © Event Handlers 
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2 Select the Main Menu button on the Stage. 


3 In the Code Snippets panel, expand the folder called Timeline Navigation and 
select Click to Go To Frame and Stop. 


CODE SNIPPETS 

KELES] 

> (Actions 

v &}Timeline Navigation 


{_) Stop at this Frame 


|Ì Click to Go To Frame and Stop 
_} Click to Go To Frame and Play 
[Click to Go to Next Frame and Stop 
{_} Click to Go to Previous Frame and Stop 
{_} Click to Go to Next Scene and Play 
{|} Click to Go to Previous Scene and Play 
| Click to Go to Scene and Play 
> (Animation 


4 Click the Add to Current Frame button at the top-left corner of the Code 
Snippets panel. 


Actions 


v © Timeline Navigation 
A Stop at this Frame 
| Click to Go To Frame and Stop 
| Click to Go To Frame and Play 
[0 Click to Go to Next Frame and Stop 
| Click to Go to Previous Frame and Stop 
| Click to Go to Next Scene and Play 
| Click to Go to Previous Scene and Play 
|} Click to Go to Scene and Play 
> (9 Animation 


Flash creates the code necessary to add the selected interactivity. If the button 
has not been given an instance name, a dialog box appears to warn you that the 
instance will automatically be given a name. Click OK to dismiss the dialog box. 


The selected symbol requires an instance name. Flash will create an instance 
name before applying the code snippet. 


C Don't show again. 


[cancel] [ox] 
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The Actions panel opens to show you the code that is generated. Flash adds the 
code to your existing code in the actions layer. If you don’t have existing code, 
Flash will create a new layer for you. The code in gray (between the /* and the */ 
symbols) describes how the code works and any instructions for customizing it 
to fit your situation. 


&POYEGeNEY OOO {Code Snippets “\ £ 
12 gotoAndStop("label3"); 
13 } 
14 pierreplatters_btn.addEventListener(MouseEvent.CLICK, restaurant4); 
15 function restaurant4(event:MouseEvent):void { 
16 gotoAndStop(" label4"); 
EZE } 
18 
19 
20 y /* Click to Go To Frame and Stop 
21 | Clicking on the specified symbol instance moves the playhead to the specified fran 
22 | Can be used on the main timeline or on movie clip timelines. 
23 
j 24 | Instructions: 
r 25 | 1. Replace the number 5 in the code below with the frame number you would like thg 
7 26 | *7 
27 
28 | button_1.addEventListener(MouseEvent.CLICK, 
29 #1_CLickToGoToAndStopAtFrame) ; 
30 
31 | function f1_ClickToGoToAndStopAtFrame(event :MouseEvent): void 
32 |£ 
33 gotoAndStop(5); 
34a} 
35 a 


5 Within the function called fl_ClickToGoToAndStopAtFrame, replace the 
gotoAndStop(5) action with gotoAndStop(1). 


You want the playhead to return to frame 1 when the viewer clicks the Main 
Menu button, so you need to replace the argument in the gotoAndStop() action. 


6 Choose Control > Test Movie > in Flash Professional. 


Clicking on each button moves the playhead to a different labeled keyframe on 
the Timeline, where a different movie clip is displayed. Clicking the Main Menu 
button returns to the first frame, which displays the original four restaurant 
choices. 


-SIAURANT G 


PRODUCED BY LOCAL MAGAZINE 


Got wild Gale kids? He 
10 B Piatto for ad-apemdty 
Mahan fun! 


Q monn 
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Playing Animation at the Destination 


So far, this interactive restaurant guide works by using the gotoAndStop() 
command to show information in different keyframes along the Timeline. But how 
would you play an animation after a user clicks a button? The answer is to use the 
command gotoAndP1ay(), which moves the playhead to the frame number or 
frame label specified by its parameter and plays from that point. 


Creating transition animations 


Next, you will create a short transition animation for each of the restaurant guides. 
Then you'll change your ActionScript code to direct Flash to go to each of the key- 
frames and play the animation. 


1 Move the playhead to the label1 frame label. 


@ actions 


q buttons | 
q title 


@ background 


2 Right-click/Ctrl-click on the instance of the restaurant information on the Stage 
and choose Create Motion Tween. 


= 


RESIAURANT GUIDE 
PRODUCED BY LOCAL MAGAZINE 


GABEL AND LOFFEL 


CATEGORY : SWISS 
OPEN :10 AM. - 10 PM. 
PRICE : $$$ 


Create Motion Tween 


a quis, egestas quis wisi. Donec ac sapien. Ut 
ultricies, metus a feugiat porttitor, dolor mauris 
est, quis mattis lacus ligula eu augue. Sed 
torbi mi, tristique vitae, sodales eget, hendrerit 
lorem ipsum dolor. 


m eget purus vitae eros ornare adipiscing. 
Select All 
Deselect All 


Free Transform 
Arrange 
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Flash creates a separate Tween layer for the instance so that it can proceed with 
the motion tween. 


TIMELINE 


@) actions . 

. 
@ content . 
@ buttons . . Hl 
@ title -a. 
@ background -a. 


In the Properties inspector, select Alpha from the Style pull-down menu in the 
Color Effect section. 


Set the Alpha slider to 0%. a en 


style: 
Alpha: ô [0_]x 


The instance on the Stage becomes 
totally transparent. 


Move the playhead to the end of the tween span at frame 19. 
Select the transparent instance on the Stage. 


In the Properties inspector, set the < COLOR EFFECT 


Alpha slider to 100%. Sila: 

The instance is displayed at a normal Alph: =) [100] x 
opacity level. The motion tween from 

frame 10 to frame 19 shows a smooth 


fade-in effect. 
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® Note: Recall that 
you can use the Motion 
Presets panel to save 

a motion tween and 
apply it to other objects 
to save you time and 
effort. Select the first 
motion tween on the 
Timeline and click Save 
selection as preset. 
Once saved, you can 
apply the same motion 
tween to another 
instance. 


8 Create similar motion tweens for the remaining restaurants in the keyframes 
labeled label2, label3, and label4. 


@ actions 

J Layer 2 

JP Layer 3 

P Layer 4 

” Layer 5 

@ content 

@ buttons 

Q title 

@ background 


Meee el @ 


~ 
DD. + De oe © o 
BEBSBUSBBBADQ 


L baben  gbiabei2  gblabei3  gblabel4 q 
E; 


oe © 


Using the gotoAndPlay command 


The gotoAndPlay command makes the Flash playhead move to a specific frame on 
the Timeline and begin playing from that point. 


1 Select the first frame of the actions layer and open the Actions panel. 


2 In your ActionScript code, change all the first four gotoAndStop() commands 
to gotoAndPlay() commands. Leave the parameter unchanged: 


e gotoAndStop("label1"); should be changed to 
gotoAndPlay("label1"); 


e gotoAndStop("label2"); should be changed to 
gotoAndPlay("label2"); 


e gotoAndStop("label3"); should be changed to 
gotoAndPlay("label3"); 


e gotoAndStop("label4"); should be changed to 
gotoAndPlay("label4"); 


Make sure you keep the function for your Main Menu button unchanged. 
You'll want that function to remain a gotoAndStop() command. 


For each of the restaurant buttons, the ActionScript code now directs the 
playhead to a particular frame label and begins playing at that point. 


@ Note: A fast and easy way of doing multiple replacements is to use the Find and Replace 
command in the Actions panel. From the options menu in the upper-right corner, select Find 
and Replace. 
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stopQ); 
gabelloffel_btn.addEventListener(MouseEvent.CLICK, restauranti); 
function restaurantiCevent :MouseEvent):void { 
gotoAndPlay("Labeli"); 
} 
garygari_btn.addEventListener(MouseEvent.CLICK, restaurant2); 
function restaurant2(event :MouseEvent):void { 
gotoAndPlay(" label2"); 
} 


10 ilpiatto_btn.addEventListener(MouseEvent.CLICK, restaurant3); 

11 function restaurant3(event:MouseEvent):void { 

12 gotoAndPlay("label3"); 

ESEE } 

14 pierreplatters_btn.addEventListener(MouseEvent.CLICK, restaurant4); 
15 function restaurant4(event:MouseEvent):void { 


WAONDUPWNH 


16 gotoAndPlay("label4"); 

ESE } 

18 

19 

20 /* Click to Go To Frame and Stop 


21 Clicking on the specified symbol instance moves the playhead to the speci 
22 Can be used on the main timeline or on movie clip timelines. 


23 

24 Instructions: 

25 1. Replace the number 5 in the code below with the frame number you would 
come * 

27 


28 button_1.addEventListener(MouseEvent.CLICK, 
29 ~f1_CLickToGoToAndStopAtFrame) ; 


30 

31 function fl_ClickToGoToAndStopAtFrame(event :MouseEvent):void { 
32 gotoAndStop(1); 

33 


Stopping the animations 


If you test your movie now (Control > Test Movie > in Flash Professional), you'll 
see that each button goes to its corresponding frame label and plays from that 
point, but it keeps playing, showing all the remaining animations in the Timeline. 
The next step is to tell Flash when to stop. 


1 Select frame 19 of the actions layer, the frame just before the label2 keyframe on 
the image layer. 


2  Right-click/Ctrl-click and choose Insert Keyframe. 


A new keyframe is inserted in frame 19 of the actions layer. 


mtume Lourur | Commer emons | wonton eomroe | 


P Layer 2 


P Layer 3 . ¢ BL 
P Layer 4 . e HL 
F Layer 5 «BL 
@ content «+ HL 
@ buttons + . De 
Ql title -aB. 
@ background “au. 
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® Note: If you want a 
quick and easy way to 
duplicate the keyframe 
containing the stop 
command, hold down 
the Alt/Option key 
while you move it to 

a new location on the 
Timeline. 


3 Open the Actions panel. 


The Script pane in the Actions panel is blank. Don’t panic! Your code has not 
disappeared. Your code for the event listeners is on the first keyframe of the 
actions layer. You have selected a new keyframe in which you will add a stop 
command. 


4 Inthe Script pane, enter stopQ) ; ACTIONS - FRAME 


Flash will stop playing when it reaches GRUB 
1 stopQ); 
frame 19. 


5 Insert keyframes at frames 29, 39, and 50. 


6 In each of those keyframes, add a stop command in the Actions panel. 


a 
. 
P Layer 2 EE l 
# Layer 3 + BL 
# Layer 4 + BL 
JP Layer 5 +O, 
W content . e HL 
@ buttons °° Be 
q title . à E. 
- a 


@ background 


7 Test your movie by choosing Control > Test Movie > in Flash Professional. 


Each button takes you to a different keyframe and plays a short fade-in 
animation. At the end of the animation, the movie stops and waits for the 
viewer to click the Main Menu button. 


Animated Buttons 


Animated buttons display an animation in the Up, Over, or Down keyframes. 
When you hover your mouse cursor over one of the restaurant buttons, the gray 
additional information box appears. But imagine if that gray information box were 
animated. It would give more life and sophistication to the interaction between the 
user and the button. 


The key to creating an animated button is to create an animation inside a movie 
clip symbol, and then place that movie clip symbol inside the Up, Over, or Down 
keyframes of a button symbol. When one of those button keyframes is displayed, 
the animation in the movie clip plays. 
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Creating the animation in a movie clip symbol 


Your button symbols in this interactive restaurant guide already contain a movie 
clip symbol of a gray information box in their Over states. You will edit each movie 
clip symbol to add an animation inside it. 


1 Inthe Library panel, expand the restaurant previews folder. Double-click the 
movie clip symbol icon for gabel loffel over info. 


Flash puts you in symbol-editing mode for the movie clip symbol called gabel 


loffel over info. 


%0 06_workingcopy-fia 


ce] É Scene 1 [E] gabel lofřel over info 


+ 


Get our your Lederhosen! 


Q {ore 


2 Select all the visual elements on the Stage (Ctrl/Command+A). 


3 Right-click/Ctrl-click and choose Create Motion Tween. 


QO Scene 1 [E] gabel loffel over info 


Create Shape Tween 


Cut 


Copy 
Paste 


4 In the dialog box that appears asking for confirmation to convert the selection 
to a symbol, click OK. 


Flash creates a Tween layer and adds one second worth of frames to the movie 
clip Timeline. 


rimeune [OUTPUT | CoMPuER eons | mononeomor| 
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® Note: If you want 
an animated button to 
repeat its animation, 
leave out the stop 
command at the end 
of the movie clip’s 
Timeline. 


5 Drag the end of the tween span back so the Timeline only has 10 frames. 
viveune OUTPUT | CoMPuER ERRORS | MoTION EDITOR) ooo 


6 Move the playhead to frame 1 and select the instance on the Stage. 


7 Inthe Properties inspector, select Alpha from the Style pull-down menu in the 
Color Effect section and set the Alpha slider to 0%. 


The instance on the Stage becomes totally transparent. 
8 Move the playhead to the end of the tween span at frame 10. 
9 Select the transparent instance on the Stage. 
10 In the Properties inspector, set the Alpha slider to 100%. 


Flash creates a smooth transition between the transparent and opaque instance 
in the 10 frame tween span. 


11 Insert a new layer and rename it actions. 


12 Insert a new keyframe in the last frame (frame 10) of the actions layer. 


13 Open the Actions panel (Window > Actions) and enter stopQ) ; in the Script 
pane. 


Adding the stop action in the last frame ensures that the fade-in effect only 
plays once. 


14 Exit symbol-editing mode by clicking the Scene 1 button above the Stage. 


15 Choose Control > Test Movie > in Flash 
Professional. 


LEST 


PRODUCED BY LOCAL MAGAZINE 


When your mouse cursor hovers over the first 
restaurant button, the gray information box 
fades in. The motion tween inside the movie clip 
symbol plays the fade-in effect, and the movie 
clip symbol is placed in the Over state of the 
button symbol. 


16 Create identical motion tweens for the other 
gray information box movie clips so that all the 
restaurant buttons are animated. 
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Review Questions 


a uu A WwW N 


How and where do you add ActionScript code? 

How do you name an instance, and why is it necessary? 
How can you label frames, and when is it useful? 

What is a function? 

What is an event? What is an event listener? 


How do you create an animated button? 


Review Answers 


ActionScript code resides in keyframes on the Timeline. Keyframes that contain 
ActionScript are indicated by a small lowercase “a”. You add ActionScript through the 
Actions panel. Choose Window > Actions, or select a keyframe and click the ActionScript 
panel icon in the Properties inspector, or right-click/Ctrl-click and select Actions. You enter 
code directly in the Script pane in the Actions panel, or you can select commands from the 
categories in the Actions toolbox. You can also add ActionScript through the Code Snippets 
panel. Select an instance on the Stage, choose an interaction in the Code Snippets panel, and 
then click the Add to Current Frame button. 


To name an instance, select it on the Stage, and then type in the Instance Name field in the 
Properties inspector. You need to name an instance to reference it in ActionScript. 


To label a frame, select a keyframe on the Timeline, and then type a name in the Frame Label 
box in the Properties inspector. You can label frames in Flash to make it easier to reference 
frames in ActionScript and to give you more flexibility. If you want to change the destination 
of a gotoAndStop or gotoAndPlay command, you can move the label rather than having to 
locate every reference to the frame number in the script. 


A function is a group of statements that you can refer to by name. Using a function makes it 
possible to run the same set of statements without having to type them repeatedly into the 
same script. When an event is detected, a function is executed in response. 


An event is an occurrence that is initiated by a button click, a key press, or any number of 
inputs that Flash can detect and respond to. An event listener, also called an event handler, is 
a function that is executed in response to specific events. 


Animated buttons display an animation in the Up, Over, or Down keyframes. To create an 
animated button, make an animation inside a movie clip symbol, and then place that movie 
clip symbol inside the Up, Over, or Down keyframes of a button symbol. When one of those 
button keyframes is displayed, the animation in the movie clip plays. 
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USING TEXT 


Lesson Overview 


In this lesson, you'll learn how to do the following: 


Add and edit text on the Stage 

Apply style and formatting options to text 
Create text with multiple columns 

Create text that wraps around objects 
Add hyperlinks to text 

Use editable text for user input 
Dynamically change text content 

Embed fonts and understand device fonts 


Load external text 


This lesson will take approximately two and a half hours to complete. If 


needed, remove the previous lesson folder from your hard drive and copy 
the Lesson07 folder onto it. 


198 7" Avenue, South Slope 


‘Type: Coop Price: $350,000 
Doorman: yes Maint/CC: $500 
Approx. SqFt: 1,100 


tep into this gracious , one bedroom apartment and eparated by a manicured garden with a reflecting pool 
ediately feel at home. It has an open, renovated d a grassy recreation area. Many units feature outdoor 
itchen that leads into a separate dining alcove perfect Space-either a private terrace or balcony-to take in the 
for entertaining. The bedroom is large enough for a king [ews of the garden, the lake, | 
ize bed and much more! There is also a large walk-in the Meridien skyline and 
loset in the bedroom. True dining alcove, high ceilings; Hightail Park. Amenities 
— 


| peautiful wood package includes 

floors, windows underground deeded parking, 
in every room, doorman, concierge services, 
and great closet a fitness center, refrigerated © 
space make this a fresh Direct storage, and pet sitting services. 
must see! 
Avalon Green is a Location! Location! Location! Close to the red and 
unique vision green line subway and a short walk to Hilltop Shopping 
Center. Experience Meridien modern living at its finest. 


JLV1S3 Ws NJIAININ 


MORTGAGE CALCULATOR 


Calculate 


Words are integral to any Flash site. Learn how to use 
the new Text Layout Format to create titles, sophis- 
ticated layouts, and dynamic text content that can 
change to suit different situations. 
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Getting Started 


To begin, view the finished project to see the different kinds of text elements that 


you'll create in this lesson. 


1 Double-click the 07End.swf file in the Lesson07/07End folder to play the 


animation. 


3764 Cobble Hill Way, Docksides 


This mint Designer Dream Three Bedroom/Two and half 
Bath boasts an abundance of pre-war detail. The 
spacious living room is generously sunlit through South 
facing restored casement windows, and features a built- 
in window-seat bordered by custom bookshelves and 
illuminated by overhead recessed lighting. The dining 
yy area includes a 
specially built 
corner banquet, 
complete with 
additional 
storage. A 
generously sized 
master bedroom 
also enjoys South 
facing windows 


ABOUT THE NEIGHBORHOOD 


The finished project is an interactive realtor site for the fictional city of 
Meridien, whose restaurant guide you completed in the previous lesson. 
Viewers can read about the featured property and its neighborhood or figure 
out how much they can afford to pay every month using the mortgage calculator 
at the bottom right. Enter a new rate, a new value for the percent down, and 


click the Calculate button to display the estimated monthly payment. 


2 Close the 07End.swf file. 


Rooms: 5 Type: Condo Price: $780,000 
Beds: 3 Doorman: yes Maint/CC: $650 
Baths: 2.5 Approx.SqFt: 2,600 


and includes two deep closets. The second bedroom has 
North facing windows, its own walk-in closet and a wall 
of tailor-made closets and drawers. The windowed 
bathroom boasts subway 
tiled walls, a classic black 
and white tile floor, and a 
large linen closet. The 
enlarged windowed kitchen 
features upgraded stainless 
appliances, including a built- 
ın Jenn-Air retrigerator/treezer; showcases black 
granite countertops, custom wood and glass cabinetry, 
and pocketed French doors. Beamed ceilings, ebony 


hardwood planked floors, and a classic layout finish this 


fine Tudor home. 


MORTGAGE CALCULATOR 


weed sno, an FIV ISS 1v3 NAICS 


3 Double-click the 07Start.fla file in the Lesson07/07Start folder to open the initial 


project file in Flash. 


The Stage already includes some simple design elements to divide the space, 


with several assets already created and stored in the Library panel. 


4 Choose File > Save As. Name the file 07_workingcopy.fla and save it in the 
07Start folder. Saving a working copy ensures that the original start file will be 
available if you want to start over. 


Understanding TLF Text 
Flash Professional CS5 introduces a way of working perry 


with text that is different and much more powerful Text Tool 
from previous versions. Flash uses a feature called ge eee a 
Text Layout Format (TLF). When you choose the =a 


Text tool ( T ) in the Tools panel to add text to the 
Stage, you must choose either TLF Text or Classic Text. 


Choose TLF Text when you want to use more sophisticated controls for text 
formatting such as multiple columns or wrap-around text. You'll learn many of the 
features unique to TLF Text in this lesson. Choose Classic Text when you don’t 
need that degree of layout control or if you need to target an older version of the 
Flash Player. 


TLF Text depends on a specific external ActionScript library to function properly. 
When you test a movie or publish a movie that contains TLF Text, an additional 
Text Layout SWZ file (ua) is created next to your SWF file. The SWZ file is the 
external ActionScript library that supports TLF Text. 
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When a SWF file that contains TLF Text is playing from the Web, the SWF looks 
for the library in a couple of different locations. The SWF looks for the library on 
the local computer it is playing on, where the library is usually cached from normal 
Internet usage. The SWF also looks on Adobe.com for the library file, and if that 
fails, looks in the same directory as the SWF. 


You should always keep the SWZ file with your SWF file so the TLF Text features 
work properly when you test your movies locally. You should also have the SWZ 
file accompany your SWF file when you upload it to your Web server, just to 

be safe. 


Merging the TLF Text library 


If you don’t want to maintain the separate SWZ file, you can merge the required 
ActionScript library with your SWF file. However, doing so adds significantly to the 
size of your published SWF file and is not recommended. 


1 Choose File > Publish Settings. Click the Flash tab and choose Settings for 
ActionScript 3.0. You can also click the Edit button next to ActionScript 
settings in the Properties inspector. 


Publish Settings <> PUBLISH 


Current profile: | Default i) (ol+iale Player: Flash Player 10 
SS Script: ActionScript 3.0 
Formats | Flash) HTML 
Class: | |Z 
Player: | Flash Player 10 Z] Profile: Default Edit... 
Script: | ActionScript 3.0 Bi Gp AIR Settings 
Images and Sounds ActionScript Settings Edit... 
JPEG quality: G 80 y PROPERTIES 


The Advanced ActionScript 3.0 Settings dialog box opens. 
2 Click on the Library path tab. 


i, I |) oa 


Export classes in frame: 1 


Errors: (Mj Strict Mode 
MÍ Warnings Mode 


Stage: [Í Automatically declare stage instances 
Dialect: | ActionScript 3.0 (Recommended) E) 


! Source path )-Librarypath | Config constants | 


SWC files or folders containing SWC files 


cac ae 


© S(AppConfig)/ActionScript 3.0/libs 
Ea] textLayout.swc - $(AppConfig)/ActionScript 3.0/libs/11.0 


a yal 


Runtime Shared Library Settings 
Default linkage: | Runtime shared library (RSL) Z| 


Preloader method: | Preloader SWF req 


Preloader SWF: $(AppConfig)/ActionScript 3.0/rsis/lc el 


Click the arrow next to the textLayout.swc listing in the display window. 


The arrow points downward, expanding the information about the TLF Text 
feature. Note that the Link Type shows that the file uses a runtime shared 
library, and the URL for the library is on Adobe.com. 


> © S(AppConfig)/ActionScript 3.0/libs 
v (4 textLayout.swc - $(AppConfig)/ActionScript 3.0/libs/11.0 
BA Feature: TLF Text 
@® Link Type: Uses default (Runtime shared library) 
> @ RSL URL: http://fpdownload.adobe.com/pub/swz/tif/1.0.0.595 /textLayou 
lal Policy File URL: http://fpdownload.adobe.com/pub/swz/crossdomain.xm! 
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@ Note: You can break 
apart text (Modify > 
Break Apart) to convert 
each letter into separate 
drawing objects whose 
stroke and fill you can 
modify. However, once 
broken apart, your 

text will no longer be 
editable. 


240 LESSON 7 Using Text 


4 Inthe Runtime Shared Library Settings section, choose Merged into code for 
the Default linkage. 


Runtime Shared Library Settings Runtime shared library (RSL) 
Default linkage: RAUF Mieke 


Preloader method: Preloader SWF 


Preloader SWF: 


The Link Type changes to Merged into code. 


> > $(AppConfig)/ActionScript 3.0/libs 
Y [Z] textLayout.swe - $(AppConfig)/ActionScript 3.0/libs/11.0 
BA Feature: TLF Text 
Link Type: Uses default (Merged into code) 
@ RSL URL: (n/a) 
[S] Policy File URL: (n/a) 


The current Flash file will merge the TLF Text ActionScript library into the 
published SWF if you click OK to accept these settings. For the project in this 
lesson, do not merge the code. Click Cancel to leave the default setting, Link 
Type as a Runtime Shared Library. 


Adding Simple Text 


You'll start by adding simple, single lines of text for display. Add text to the Stage 
with the Text tool in the Tools panel. When you add text, whether TLF Text or 
Classic Text, the text remains fully editable. So at any point after you create your 
text, you can return to it and change it or any of its properties, such as its color, 
font, size, or alignment. 


As with other Flash elements, it’s best to separate text on its own layer to keep your 
layers organized. Having text on its own layer also makes it easy to select, move, or 
edit your text without disturbing the items in the layers below or above it. 


Adding the titles 


You'll add titles to various sections of the realtor site and learn about the different 
formatting and style options. 


1 Select the banner layer and click the New Layer button. Rename it text. 


TIMELINE | OUTPUT iR OR 
an 
ex 
I banner . E 
Ql calculator . H 
q background . E 


2 Select the Text tool. 

3 Inthe Properties inspector, select TLF Text and Read Only. In the Character 
section, choose Times New Roman for Family, Bold for Style, 20.0 for Size, 14.0 
for Leading, and black for Color. 


PROPERTIES 


Text Tool 
TLF Text Ly 


Read Only A |e 


s7 CHARACTER 


Family: | Times New Roman v 


Style: | Bold X Embed... 


Size: 20.0 px Leading: 14.0 | pt |v 


Color: MJ Tracking: 0 
Highlight: |] M Auto kern 


Anti-alias: | Readability M 


You may choose a similar font if Times New Roman is unavailable on your 
computer. For TLF Text, you have the option of choosing Read Only, Selectable, 


or Editable. 


PROPERTIES 


Text Tool 


TLF Text Ly 
v Read Only [E] [F + 
Selectable 
Editable 


Family: | rimeswew Kkoman v 


sy CHARACT] 


Style: | Bold v || Embed... 


e Read Only displays text that can’t be selected or edited by the end user. 
e Selectable displays text that the user can select to copy. 


e Editable displays text that the user can select and edit. Use the Editable 
option for text input fields, such as login and passwords. You'll use the 
Editable option later in this lesson to create the Mortgage Calculator. 


4 Click the top-left corner of the Stage where you want to begin adding text. Begin 
entering the address of the featured property, 198 7th Avenue, South Slope. 
Exit the Text tool by choosing the Selection tool. 


198 7th Avenue, South Slop et 
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@ Note: The 
registration of text is at 
the top-left corner of 
the text box. 


@ Note: You can also 
click and drag with the 
Text tool to define a 
text box at a set width 
and height. You can 
always change the 
dimensions of the text 
box to accommodate 
your text. 
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In the Properties inspector, position the text at X=90 and Y=10. 
Choose the Text tool again. 


In the Properties inspector, select TLF Text and Read Only. In the Character 
section, choose Times New Roman for Family, Bold for Style, 12.0 for Size, 12.0 
for Leading, and white for Color. 


"nore AY De 


Text Tool 
[TLE Text Ly] 


Read Only Ly] [Fy] 


Family: | Times New Roman | v 


Style: | Bold | ][_Embed... 

Size: 12.0px Leading: 12.0 [et i] 
Color: [—_] Tracking: 0 
Highlight: |_| M Auto kern 

Anti-alias: | Readability MM 


Click on the dark green banner to place the beginning of your next piece of text 
and enter the section title About the Neighborhood. 


About the N eighborhoodg 


Create a third piece of text at the top of the dark brown area with the section 
title Mortgage Calculator. 


Mortgage Calculator} 


10 Position the About the Neighborhood title at X=70 and Y=460. Position the 


Mortgage Calculator title at X=480 and Y=460. 


198 7th Avenue, South Slope 


About the Neighhartaod Mortgage Celeulatar 


Creating vertical text 


Although vertical text is not common, it can be useful for unusual displays. For 
many Asian languages, vertical text is essential to display them correctly. In this les- 
son, you'll use a vertical orientation for the overall banner title. 


1 Select the Text tool. 


2 Inthe Properties inspector, select TLF Text and Read Only. In the Character 
section, choose Arial Narrow for Family, Regular for Style, 38.0 for Size, and 
white for Color. 


PROPERTIES 


Text Tool 
TLF Text lv 
Read Only ly] [my 
x7 CHARACTER 
Family: [Arial Narrows 


Style: | Regular v ||__ Embed... 
Size: 38,0 px Leading: 17,2 [pt I7] 
Color: [| Tracking: 0 

Highlight: | | M Auto kern 


Anti-alias: | Readability X 


3 From the orientation pull-down menu, choose Vertical. 


PROPERTIES 


Text Tool X 
TLF Text ly b] 
Read Only | Horizontal 


s7 CHARACTER 


Family: | Arial Narrow 


Style: | Regular v 


@ Note: Inthe 
Character section of the 
Properties inspector, 
you can choose 270° to 
change the orientation 
of the individual 
characters as well as the 
lines of text. 
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4 Click on the black vertical banner to place the beginning of your text and enter 
the banner title Meridien Real Estate Live Your Dream. 


fUe8Jq INOA BAI] 384S |eay UPU 


Modifying characters 


Use the Character and Advanced Character options in the Properties inspector to 
modify the way your text appears. You've already used different colors, font fami- 
lies, font sizes, and orientations. Now you'll explore some less obvious options. 


1 Double-click the top address and select the “th” characters. 


{198 7th Avenue, South Slope} 


2 Inthe Character section of the Properties inspector, select the Superscript 


option. 
s7 CHARACTER [2] 
Family: | Times New Roman |7 
Style: | Bold v || Embed... 


Size: 20,0 px Leading: 14.0 | pt |v 
Color: B Tracking: 0 
Highlight: [7] M Auto kern 

Anti-alias: | Readability ly 


Rotation: | Auto |v T| cie 
~~ ADVANCED CHARACTER 


Link: 


The “th” becomes smaller and is raised from the baseline as a superscript. 


{198 u Avenue, South Slope 
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3 Exit the Text tool by selecting the Selection tool, and click an empty part of the 
Stage to deselect the text. 


4 Hold down the Shift key and select the bottom two text titles, About the 
Neighborhood and Mortgage Calculator. 


About the Neighborhood Mortgage Calculator 


5 Inthe Advanced Character section of the Properties inspector, choose Upper 
Case from the Case menu. 


s7 ADVANCED CHARACTER a 
Link: í 
a. 
Target: |r 2 
c Default 
Digit 
Lower Case 
Digit 


Caps to Small Caps 
Ligat Lower Case to Small Caps 


Baseline Shift: 0.9 | pt i] e 
ma 


The characters in the two selected bottom titles change to all uppercase. 


ABOUT THE NEIGHBORHOOD MORTGAGE CALCULATOR 


6 Double-click the vertical banner text and select the words Meridien Real Estate. 
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7 Inthe Advanced Character section of the Properties inspector, choose Upper 


Case from the Case menu. 


The selected words in the banner title change to all uppercase. 


8 Select the last three words of the banner title, Live Your Dream. 


9 In the Properties inspector, change the font size to 22 and Baseline shift to 6.0. 


F 


dnstance Name» 


TLF Text 


Read Only 


v 


PROPERTIES 


s7 CHARACTER 


Family: 


Arial Narrow 


ly 


Style: 


Color: [ 


| Regular |r 


Embed... 


sie 0px) Leading: 17.2 


pt |v 


Tracking: 0 


Highlight: = M Auto kern 


Anti-alias: 


Readability 


Rotation: | Auto 


lv 


H 
laz 


T 


a 


Link: 
Target: 
Case: 
Digit Case: 
Digit Width: 
Ligatures: 


Break: 


Locale: 


<7 ADVANCED CHARACTER 


Caps to Small Caps 


Default 


Default 


Common 


Auto 


Baseline shift G2) pt 


English 


D> 


The selected words in the banner title become smaller and are shifted upward 


from their baseline. The variations in size and baseline shift in the banner title 


create a more pleasing design. 


Adding Multiple Columns 


Now you'll add the text description of the property and some details about the 


neighborhood. The text will appear in different columns. For the property details, 


you'll add a three-column text description, and for the neighborhood, you'll add a 


two-column text description. 


1 Select the Text tool. 


2 Inthe Properties inspector, select TLF Text and Read Only. In the Character 
section, choose Times New Roman for Family, Bold for Style, 14.0 for Size, 16.0 
for Leading, and black for Color. Make sure you switch back to horizontal text. 


PROPERTIES 


Text Tool 


TLF Text |v 


Read Only FA RI 


s7 CHARACTER 


Family: | Times New Roman |x 


Style: [Bold |v || Embed... 


Size: 14,0 px Leading: 16.0 | pt |v 


Color: B Tracking: 0 
Highlight: |] M Auto kern 


Anti-alias: | Readability Z 


3 Click on the top horizontal banner below the address and drag out a long text 
box to define the width and height of the text. 


198 7" Avenue, South Slope 


4 Inthe Container and Flow section of the Properties inspector, enter 3 for the 
Columns option. 


sz CONTAINER AND FLOW 
Behavior: [ Multiline v 
Max chars: m == 
Columns: []]} E] gH 20.0 px 
Padding: L: 2.0 px R: 2.0 px 
S T:2.0px B: 2.0 px 
2 Lrt aA 
1st Line Offset: | Auto ly 


Your selected text box becomes enabled to display three columns. 


5 Enter text in the text box that provides details of this hypothetical property, 
such as the number of rooms, number of beds, and so on. Press Return 
or Enter after each line. You can copy the information from the text file 
07SampleRealEstateText1.txt in the 07Start folder. 


198 7" Avenue, South Slope 


ms: 3 Type: Coop Price: $350,000 

ds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 
- 
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The text is displayed in three columns. As text in the first column reaches the 
bottom of the text box, the next line appears at the top of the next column. 


6 Exit the Text tool by choosing the Selection tool, and click an empty part of the 
Stage to deselect the text. 


7 Select the Text tool again. Now you'll create the text for the About the 
Neighborhood section. 


8 In the Properties inspector, select TLF Text and Read Only. In the Character 
section, choose Times New Roman for Family, Regular for Style, 12.0 for Size, 
12.0 for Leading, and black for Color. 


Text Tool 


TLF Text Ly 
[Read Only Iv] [Zz] 


s7 CHARACTER 


Family: [Times New Roman ly 


Style: [Regular |x jl Embed... 


Color: MJ Tracking: 0 
Highlight: |] M Auto kern 


9 Click on the bottom green bar below the About the Neighborhood title and drag 
out a text box so that it takes up most of the light green space. 


ABOUT THE NEIGHBORHOOD 


10 In the Container and Flow section of the Properties inspector, enter 2 for the 
Columns option. 


s7 CONTAINER AND FLOW 
Behavior: 
Max chars: = ese 


coumes: MR] Ma 


Padding: L: 2.0 px R: 2.0 px 


€> T:2.0px B: 2.0 px 


2 er aAa 
1st Line Offset: | Auto D 


Your selected text box becomes enabled to display two columns. 


11 Open the text file O7SampleRealEstateText1.txt in the 07Start folder if it’s not 
already open. Copy the Latin placeholder text in the About the Neighborhood 
section and paste it into the two-column text box. 


ABOUT THE NEIGHBORHOOD 


The text is displayed in two columns. As text in the first column reaches the 
bottom of the text box, the next line appears at the top of the next column. 


Modifying the text box 


If your text doesn’t entirely fit in its text box, Flash displays a red cross at the 
bottom-right corner. The red cross means there is overflow text that is not visible. 


ABOUT THE NEIGHBORHOOD 


[Lorem ipsum dolor sit amet, laoreet imperdiet sagittis eu, 
LJonsectetur adipiscing elit. Sed non pharetra ut augue. Morbi laoreet 
eros elit, non molestie turpis. rhoncus commodo. Nullam sit amet 
ullarn ut ipsum arcu, ac placerat luctus enim. Praesent dictum 
lectus. Sed in purus nec magna consequat varius. Phasellus in risus 
tempor tristique. Morbi vitae eros lorem, vel lacinia magna. Integer 
nibh, sed placerat felis. In elit dolor, mauris velit, vulputate a sodales ut, FH 
1 & s Duis si 


ondimmen 


To see more of the text, you can enlarge the text box. 
1 Select the Text tool or the Selection tool. 


2 Move your mouse cursor over one of the solid blue squares surrounding the 
text box. 


Your mouse cursor changes to a double-headed arrow, indicating the direction 
in which you can modify the size of the text box. 


3 Click and drag to make the text box wider or taller to fit the text. 


ABOUT THE NEIGHBORHOOD 


The text box gets resized, and the text reflows to accommodate the new 
dimensions. 


@ Note: Inthe 
Container and Flow 
section of the Properties 
inspector, you can 

also modify the gutter, 
the space between 
columns, and the 
padding between the 
text and the boundaries 
of the text box to help 
you get the exact text 
layout you desire. 


@ Note: You can also 
resize a text box by 
entering new Width 
and Height values in the 
Properties inspector. 
However, do not resize 
a text box with the 
Transform panel or the 
Free Transform tool. 
Doing so will squash or 
stretch the contents of 
the text box and distort 
the text. 
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Wrapping Text 


Long passages of text are visually boring. Instead, if you can wrap text around pho- 
tographs or graphic elements, you create more visual interest and a more pleasing 
design. Take a look at any magazine in print or online, and you'll see how text flows 
around photos to help integrate the elements on the page. 


@ Note: Linked text In this section, you'll add some graphic elements to the realtor site—an animated 
boxes are also referred slide show and a photo of the real estate agent—and create text that wraps around 
to as “threaded text 


containere” them both. You create wrapping text by linking separate text boxes. Text will flow 


from one text box to another as if in a single container. 


Adding the graphics 


The animated slide show and the graphic of the real estate agent have already been 
created and are in the Library panel for you to use. 


1 Insert a new layer and rename it images. Drag the images layer under the 
banner layer. 


2 Inthe Library panel, select the photos movie clip symbol. 


LIBRARY 


07_workingcopy.fla ly| a Gy 


14 items Pp 


Name =| Linkage 
[E] banner_black 

[E] banner_skyline 

> øP bitmaps 

[um] calculate 

fis) contact 

[E] photos 

fs) Symbol 2 

[E] Symbol 3 

[E] Symbol 4 


3 Drag the photos movie clip symbol from the Library panel to the Stage. Position 
the movie clip instance at X=0 and Y=230. 
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198 7" Avenue, South Slope 


ABOUT THE NEIGHBORHOOD MORTGAGE CALCULATOR 


= 
m 
ZS) 
= 
m 
Z 
A 
= 
m 
o 
> 
m 
g 
o 
g 
3 


The movie clip contains motion tweens of several photographs fading in and 
out. A movie clip’s animation is independent of the main Timeline and plays 
only when you test the movie (Control > Test Movie > in Flash Professional). 


4 Inthe Library panel, drag the contact movie clip symbol from the Library panel 
to the Stage. Position the contact movie clip instance at X=620 and Y=175. 


198 7™ Avenue, South Slope 
Rooms: 3 Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 


Baths: 1 Approx. SqFt: 1,100 


ABOUT THE NEIGHBORHOOD MORTGAGE CALCULATOR 


wea ino, 01 FIV ISS WS NSIGIMSN 


Calculate 


The movie clip of the real estate agent and her contact information is a simple 
static graphic. 
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Linking the text boxes 
Now you'll arrange several linked text boxes around the graphic elements. 
1 Select the Text tool. 


2 Inthe Properties inspector, select TLF Text and Read Only. In the Character 
section, choose Times New Roman for Family, Regular for Style, 14.0 for Size, 
20.0 for Leading, and black for Color. 


Text Tool 


[TLE Text ly 


[Read Only ly] [Fy 


s7 CHARACTER 


Family: | Times New Roman X 
Style: Embed... 
Size: 14.0 px Leading: 20.0 [et 1] 

Color: MJ Tracking: 0 

Highlight: |_| M Auto kern 
Anti-alias: | Readability X 


3 Click and drag out the first text box that takes up the space above the photo of 
the bedroom and whose right edge extends to about the middle of the Stage. 
Don’t worry about being too precise because you can always adjust the size and 
location of your text box. 


198 7" Avenue, South Slope 

Rooms: 3 Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 


ab 


Your first text box is created. 
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4 Click on the empty box on the lower-right corner of 
your text box. 


Your cursor changes to an icon of the corner of a text 
box ( 


5 Click and drag out your second text box just to the right of the photos movie 
clip instance. 


198 7" Avenue, South Slope 


When you release your mouse cursor, your second text box becomes linked to @ Note: If you simply 
the first text box. Blue lines that connect the first to the second represent the click on the Stage to 
link define your next linked 
pee text box, Flash creates a 
text box that is identical 
th 
188 7 Avenue; South Siehe in size to the previous 
i — kes text box, 
Baths: 1 Approx. SqFt: 1,100 
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6 Click on the empty box on the lower-right corner of your second text box; 
then click and drag out your third text box above the real estate agent contact 


information. 
198 7" Avenue, South Slope 
Rooms: 3 Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 


| i 


7 Continue creating linked text boxes until you have five boxes that flow around 
the photo and real estate agent. 


198 7 Avenue, South Slope 

Rooms: 3 ‘Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 
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Adding content to the linked text boxes 


Next, add text to your linked text boxes. Begin with the first text box, and as text 
reaches the limit of one box, it will automatically flow into the next. 


1 Open the file O7SampleRealEstateText1.txt from the 07Start folder if it’s not 
already open. 


2 Copy the description of the property. 


3 Double-click the first text box on the Stage and paste the text. 


198 7 Avenue, South Slope 

Rooms: 3 Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 


tep into this gracious , one bedroom apartment and 
ediately feel at home. It has an open, renovated 

itchen that leads into a separate dining alcove perfect 

r entertaining. The bedroom is large enough for a king 

ize bed and much more! There is also a large walk-in 

Joset in the bedroom. True dining alcove, high ceilings, 


n every room, 
and great closet 


d a grassy recreation area. Many units feature outdoor 
ppace-cither a private terrace or balcony-to take in the 
Jyiews of the garden, the lake, 

the Meridien skyline and 
Hightail Park. Amenities 
package includes 
lunderground deeded parking, 
doorman, concierge services, 
a fitness center, refrigerated 


arated by a manicured garden with a reflecting pool | 


ny resh Direct storage, and pet sitting services. 


Location! Location! Location! Close to the red and 
Yereen line subway and a short walk to Hilltop Shopping 
Center. Experience Meridien modern living at its finest. 


+ . 4 


Click on the Stage outside the text boxes to deselect them and view how your 
text appears as it wraps around the graphics. Adjust the size or location to 
finesse the way your text flows from one box to the next. 


198 7" Avenue, South Slope 


Step into this gracious , one bedroom apartment and 
immediately feel at home. It has an open, renovated 
kitchen that leads into a separate dining alcove perfect 
for entertaining. The bedroom is large enough for a king 
size bed and much more! There is also a large walk-in 
closet in the bedroom. True dining alcove, high ceilings, 
yy beautiful wood 
floors, windows 
in every room, 
and great closet 
space make this a 
must see! 
Avalon Green is 
a unique vision 
featuring two 
tasteful buildings 


® Note: Treat the 
linked text boxes as 

if they were a single 
container. As you add, 
delete, and edit text, 
the contents reflow to 


Rooms: 3 ‘Type: Coop Price: $350,000 
Beds: 1 Daonna Maint/CC: $500 fit. You can select all 
Baths: 1 Approx. SqFt: 1,100 (Edit > Select All), and 


the contents of all the 
linked text boxes will be 
selected. 


separated by a manicured garden with a reflecting pool 
and a grassy recreation area. Many units feature outdoor 
space-either a private terrace or balcony-to take in the 
views of the garden, the lake, 
the Meridien skyline and 
Hightail Park. Amenities 
package includes 
underground deeded parking, 
doorman, concierge services, 
a fitness center, refrigerated 


Fresh Direct storage, and pet sitting services. 


Location! Location! Location! Close to the red and 
green line subway and a short walk to Hilltop Shopping 
Center. Experience Meridien modern living at its finest. 
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Deleting and inserting text boxes 


If you need to edit the way the text flows, you can always delete linked text boxes or 
add new ones, and the linkages between the existing ones will be maintained. 


1 With the Selection tool, select the second linked text box. 


198 7" Avenue, South Slope 

Rooms: 3 Type: Coo; Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 


tep into this gracious , one bedroom apartment and 
ediately feel at home. It has an open, renovated 
itchen that leads into a separate dining alcove perfect 
for entertaining. The bedroom is large enough for a king 
ize bed and much more! There is also a large walk-in 
loset in the bedroom. True dining alcove, high ceilings, 


eparated by a manicured garden with a reflecting pool 
d a grassy recreation area. Many units feature outdoor 
Space-cither a private terrace or balcony-to take in the E 
Lyiews of the garden, the lake, | 
the Meridien skyline and 
Hightail Park. Amenities 
package includes 
underground deeded parking, 
\doorman, concierge services, 
la fitness center, refrigerated ¢ 
fresh Direct storage, and pet sitting services. 


Location! Location! Location! Close to the red and 
green line subway and a short walk to Hilltop Shopping 
Center. Experience Meridien modern living at its finest. 


m| 


Press the Delete key on the keyboard. 


The second linked text box is deleted from the Stage, but the remaining text 
boxes maintain their linkages. The first text box is now linked to the third at the 
top of the second column. Notice that the last text box shows the red cross at its 
bottom-right corner, indicating overflow text that cannot be displayed. 


198 7" Avenue, South Slope 

Rooms: 3 ‘Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 


tep into this gracious , one bedroom apariment and 

ediately feel at home. It has an open, renovated 

itchen that leads into a separate dining alcove perfect 

for entertaining. The bedroom is large enough for a king 

ize bed and much more! There is also a large walk-in 

loset in the bedroom. True dining alcove, high ceilings, 
e 


GER wood floors, windows in every room, and great 
loset space make this a must see! 
Avalon Green is a unique vision featuring two tasteful H 
Juildings separated by a 
manicured garden with a 
reflecting pool and a grassy 
recreation area. Many units 
feature outdoor space-either 
a private terrace or balcony- 
to take in the views of the 
the lake, the Meridien skyline and Hightail 
[Park. Amenities package includes underground deeded 
parking, doorman, concierge services, a fitness center, 
refrigerated Fresh Direct storage, and pet sitting 
services. 


3 Click on the box containing the small arrowhead on the lower-right corner of 


the first text box. 


4 Click and drag out the text box to reestablish the one you just deleted. 
198 7" Avenue, South Slope 
Rooms: 3 ‘Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 


tep into this gracious , one bedroom apariment and 
ediately feel at home. It has an open, renovated 
itchen that leads into a separate dining alcove perfect 
for entertaining. The bedroom is large enough for a king 
ize bed and much more! There is also a large walk-in 
Joset in the bedroom. True dining alcove, high ceilings,T 


ase wood floors, windows in every room, and great] 
loset space make this a must see! 
(Avalon Green is a unique vision featuring two tasteful 
tbuildings separated by a 
manicured garden with a 
reflecting pool and a grassy 
recreation area. Many units 
feature outdoor space-either 
a private terrace or balcony- 
to take in the views of the ¢ 
, the lake, the Meridien skyline and Hightail 
Park. Amenities package includes underground deeded 
parking, doorman, concierge services, a fitness center, 
refrigerated Fresh Direct storage, and pet sitting 
services. 


A new text box is inserted between the existing linked text boxes, and the text 


reflows to fill the new container. 


198 7" Avenue, South Slope 


Rooms: 3 Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 


ep into this gracious , one bedroom apartment and 
ediately feel at home. It has an open, renovated 
itchen that leads into a separate dining alcove perfect 
for entertaining. The bedroom is large enough for a king 
ize bed and much more! There is also a large walk-in 
loset in the bedroom. True dining alcove, high ceilings," 


floors, windows 
in every room, 
and great closet 
space make this a 
must see! 

Avalon Green is a 
unique vision 


eparated by a manicured garden with a reflecting pool 
Hia a grassy recreation area. Many units feature outdoor 
ppace-either a private terrace or balcony-to take in thë E 
views of the garden, the lake, 
the Meridien skyline and 
Hightail Park. Amenities 
lpackage includes 
underground deeded parking, 
\doorman, concierge services, 
la fitness center, refrigerated 
pfresh Direct storage, and pet sitting services. 


g 


Location! Location! Location! Close to the red and 
green line subway and a short walk to Hilltop Shopping 
Center. Experience Meridien modern living at its finest. 


Breaking and relinking text boxes 


You can also break the links between text boxes and create new linkages. 


1 Click on the box containing the small arrowhead on the lower-right corner of 


the first text box (2gs:Jp ). 


Move your mouse cursor over the second text box. 


Your cursor changes to a broken link icon (8), indicating that you can break 
the link to the text box that is currently below your cursor. 
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3 Click on the second text box. 


The link from the first text box to the second text box is broken. Your text now 
can’t flow out of the first text box. 


198 7" Avenue, South Slope 

Rooms: 3 Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 


tep into this gracious , one bedroom apariment and 
diately feel at home. It has an open, renovated 
itchen that leads into a separate dining alcove perfect 
for entertaining. The bedroom is large enough for a king 
ize bed and much more! There is also a large walk-in 
‘loset in the bedroom. True dining alcove, high ceilings, 


= 
a ) 


4 Let’s reestablish the link. Click on the red box on the lower-right corner of the 
first text box and move your cursor over the second text box. 


Your cursor changes to a linked icon (%8), indicating that you can establish a 
link to the text box that is currently below your cursor. 


5 Click on the second text box. 


198 7 Avenue, South Slope 

Rooms: 3 Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 


tep into this gracious , one bedroom apartment and 

ediately feel at home. It has an open, renovated 

itchen that leads into a separate dining alcove perfect p] 

for entertaining. The bedroom is large enough for a king i k| 

ize bed and much more! There is also a large walk-in T 

Joset in the bedroom. True dining alcove, high ceilings, 
Peas ) 


2 
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The first text box is again linked to the second text box. Your text now flows 


throughout the five text boxes. 


198 7" Avenue, South Slope 

Rooms: 3 Type: Coop 
Beds: 1 Doorman: yes 
Baths: 1 


Price: $350,000 
Maint/CC: $500 


Approx. SqFt: 1,100 


tep into this gracious , one bedroom apartment and 
ediately feel at home. It has an open, renovated 
itchen that leads into a separate dining alcove perfect 
for entertaining. The bedroom is large enough for a king 
ize bed and much more! There is also a large walk-in 
loset in the bedroom. True dining alcove, high ceilings. 


[Avalon Green is a 
unique vision 


eparated by a manicured garden with a reflecting pool 
d a grassy recreation area. Many units feature outdoor 
Space-cither a private terrace or balcony-to take in the 
Lyiews of the garden, the lake, | 
the Meridien skyline and 
Hightail Park. Amenities 
package includes 
underground deeded parking, 
doorman, concierge services, 
a fitness center, refrigerated 


> 


fresh Direct storage, and pet sitting services. 


Location! Location! Location! Close to the red and 
green line subway and a short walk to Hilltop Shopping 
Center. Experience Meridien modern living at its finest. 


Finding the Next or Previous Link 


Sometimes, if you have 


and ‘Separated by a manicured garden with a reflecting poo! 

multiple linked text boxes, it ted d a grassy recreation area. Many units feature outdoor 

> erfect ppace- Create Motion Tween /-to take in the 
may be confusing to see the raking| views 
linkages or difficult to select Mkini | fhe Miley ind Previous Link 
the boxes in succession. You = | [High 

s 3 . wood ipackay Cut 
can right-click/Ctrl-click over indows | |undery Copy 
any text box and, if it is linked, room, doom Paste 
F : icloset | [afitne elect All 

you can choose Find Previous ketisa|| pb] Deselect All =] 
Link or Find Next Link. The ! 


previous or next linked text 
box will become selected. 


Hyperlinking Text 


The description of the property on the realtor site contains references to several 
landmarks and destinations of interest in Meridien City. You'll add a hyperlink to 
one of those text references so your users can click it and be directed to a Web site 
with additional information. Hyperlinks are easy to add to text and don’t require 
any HTML or ActionScript coding. 
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Adding a hyperlink 


1 Double-click the second linked text box on the Stage and select the words 
Avalon Green. 


mmiediately feel at home. It has an open, renovated 
itchen that leads into a separate dining alcove perfect 

or entertaining, The bedroom is large enough for a king 
bize bed and much more! There is also a large walk-in 


floors, windows 
in every room, 
and great closet 
space make this a 
‘must see! 

Avalon Green is a 
unique vision 
featuring two 


tasteful buildings 


@ Note: A _self Target 2 Inthe Advanced Character section of the Properties inspector, enter 

loads the URL in the http://www.avalongreen.org for the Link and choose _blank in the Target 
same browser window, 
taking over your Flash 
movie. A _top and 
_parent Target refers 
to the arrangement of Link: |http://avalongreen.org | 

a frameset, and loads Target: [blank _ _—_ č — ë 

the URL in a particular — 

frame relative to the 

current frame. The selected words in your text box become underlined, indicating that it is 


pull-down menu. 


«7 ADVANCED CHARACTER 


hyperlinked. 


Step into this gracious , one bedroom apartment and 
immediately feel at home. It has an open, renovated 
kitchen that leads into a separate dining alcove perfect 
for entertaining. The bedroom is large enough for a king 
size bed and much more! There is also a large walk-in 
closet in the bedroom. True dining alcove, high ceilings, 


— 


beautiful wood 
floors, windows 
in every room, 
and great closet 
space make this a 
must see! 

Avalon Green is a 
unique vision 
featuring two 
tasteful buildings 


The Web address is a fictional one. Be sure to include the protocol http:// 
before any URL to choose a site on the Web. The Target field determines where 
the Web site loads. A _blank Target means that the Web site loads in a blank 
browser window. 
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3 Select the words Avalon Green, and in the Character section of the Properties 
inspector, change the color from black to blue. 


The selected words become blue and remain underlined, which is the standard 
visual cue for a hyperlinked item in a browser. However, you are free to display 
your hyperlink in any fashion, just as long as your user can recognize it as a 
clickable item. 


Step into this gracious , one bedroom apartment and 
immediately feel at home. It has an open, renovated 
kitchen that leads into a separate dining alcove perfect 
for entertaining. The bedroom is large enough for a king 
size bed and much more! There is also a large walk-in 
closet in the bedroom. True dining alcove, high ceilings, 
beautiful wood 
floors, windows 
in every room, 
and great closet 
space make this a 
must see! 

Avalon Green is a 
unique vision 
featuring two 
tasteful buildings 


4 Choose Control > Test Movie > in Flash Professional. Click the hyperlink. 


A browser opens and attempts to load the fictional Web site at www. 
avalongreen.org. 


Creating User-input Text 


Next, you'll create the Mortgage Calculator, which accepts input from the user 
through the keyboard and displays estimated monthly payments based on those 
inputs. You create user-input text with Editable TLF Text. User-input text can be 
used to create sophisticated customized interactions that gather information from 
the viewer and tailor the Flash movie based on that information. Examples include 
applications requiring a login and password, surveys and forms, or quizzes. 


Adding the static text elements 


Start by creating all the text that doesn’t change or can’t be edited—the static ele- 
ments of the mortgage calculator. 


1 Select the Text tool. 
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2 Inthe Properties inspector, select TLF Text and Read Only. In the Character 
section, choose Times New Roman for Family, Regular for Style, 12.0 for Size, 
12.0 for Leading, and black for Color. 


<7 CHARACTER 


rami 

Style: [Regular |v || Embed... | 

Size: 120px Leading: 12,0 
Color: B Tracking: 0 
Highlight: [|] M Auto kern 


3 Click in the dark brown area under the Mortgage Calculator text and insert 
five separate lines of text for TERM: 30 Year Fixed, PRICE: $350,000, RATE, 
PERCENT DOWN, and MONTHLY PAYMENTS. 


MORTGAGE CALCULATOR 


Calculate 


Adding the display fields 


For Rate and Percent Down, you'll add Editable text boxes so your user can enter 
their own numbers and customize the mortgage calculations to evaluate their buy- 
ing decision. 


1 Select the Text tool. 


2 Inthe Properties inspector, select TLF Text and Editable. Keep the other font 
information the same as the previous text you created. 


Text Tool 
TLF Text ly 
Read Only [iz] 
Selectable 


Calculate 
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4 Inthe Container and Flow section of the Properties inspector, choose a white 
color and 75% Alpha value for the Fill. 


la 


benavo: 2. 
Max aan 7 E ASHE] A, 
Columns: [[ 1 AH -px Pid 
Padding: L: 2.0 px R: 2.0 px = 
S 7: 2,0px B: 2,0 px R 
2L]: a CL = 

PEER. Alphax7s A @ 


The Editable text box next to Rate displays a semitransparent white background. 
You can also add a stroke to the text box to give it more definition if you desire. 


5 Create a second Editable text box next to Percent Down with the same 
semitransparent white background. 


MORTGAGE CALCULATOR 


Calculate 


6 Create a third text box next to Monthly Payments with the same 
semitransparent white background, but make this text box Read Only. 


MORTGAGE CALCULATOR 


Calculate 


The text box next to Monthly Payments is Read Only because it will display a 
number calculated based on the user-inputted Rate and Percent Down. The user 
does not need to edit the information in that box. 
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7 Inthe Editable text box next to Rate, enter 5.25. In the Editable text box next to 
Percent Down, enter 20. 


MORTGAGE CALCULATOR 


Entering initial text in Editable text boxes often guides users in knowing what 
kind of text is expected. 


Embedding fonts 


For any text that may be edited during runtime, you should embed the fonts. Since 
the user can enter any kind of text in Editable text boxes, you need to include those 
characters in the final SWF to ensure that text appears as you expect it, with the 
same font that you’ve chosen in the Properties inspector. 


1 Select the first Editable text box next to Rate. 


Device Fonts 


Use device fonts as an alternative to embedding fonts. Device fonts are three 
generic options grouped at the top of the Character Family pull-down menu. You 
can also choose the Use device fonts option from the Anti-alias pull-down menu. 


a 


Reset 
s7 CHARACTER 
Family: [Times NewRoman E 
Style: T _sans Sample 
Size: Tr _serif Sample 
Color ¥ -typewriter Sample 
Highlight: 
T Ayo RPSUEY 
Anti-alias: = 
T SE XPOLEY 
O 88 XRFLUEL 


The three device fonts are _sans, _serif, and _typewriter. These options find and use 
the fonts on a user's computer that most closely resemble the specified device font. 
When you use device fonts, you don’t have to worry about embedding fonts, and 
you can be assured that your viewer sees text that is similar to the text that you see 
in the authoring environment. 


2 Inthe Character section of the Properties inspector, click the Embed button. 
You can also choose Text > Font Embedding. 


<7 CHARACTER 


Family: | Times New Roman Ly 
Style: [Regular | ¥| i 
Size: 12.0px Leading: 12.0 | pt |v 

Color: [=a] Tracking: 0 

Highlight: [7] M Auto kern 
Anti-alias: | Readability 


The Font Embedding dialog box appears. The font that is used in the selected 
text box appears on the left. 


3 In the Character ranges section, select Numerals. 


Font Embedding 


ia eam [ox 
Font: al : 
Name: Cancel 
v O Times New Roman 
Font 1 
Regular (Font 1) ol Help 
Family: | Times New Roman v 


Style: | Regular 


Character ranges: 

[Al (1088/93514 glyphs) č č => OOO 
[L] Uppercase [A..Z] (27/27 glyphs) 

[C] Lowercase [a..z] (27/27 glyphs) 

[VM Numerals [0..9] (11/11 glyphs) 

[C Punctuation (!@#%...] (52/52 glyphs) | 
A Rasie Latin (95/95 alunhs) in| 
Also include these characters: 


Estimated glyphs: 11 


Font Name: Times New Roman 
Vendor ID: Mono 
Typeface © The Monotype Corporation pic. Data © The 


Monotype Corporation pic/Type Solutions Inc. 1990-1992. 
All Rights Reserved 


http: //www.monotype.com/html/type/license.htm! 


More Font Info 


All the number characters of the current font, Times New Roman Regular, will 
be included in the published SWF. Click OK. 


@ Note: Embedding fonts dramatically increases the size of your final SWF, so exercise caution 
when doing so, and limit the number of fonts and characters when possible. 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 265 


Naming the text boxes 


For Flash to control what text to display in a text box or to know what has been 
entered in an Editable text box, the text box must be given an instance name in the 
Properties inspector. Just as you named button instances in Lesson 6, naming text 
boxes on the Stage allows ActionScript to reference them. The same naming rules 
apply for text boxes as they do for buttons. 


1 Select the first Editable text box next to Rate. 


2 In the Properties inspector, enter rate_txt for the instance name. 


PROPERTIES 


TLF Text Ly 


Editable v| |F oy. 


<7 POSITION AND SIZE A 


The suffix _ txt is the convention for text boxes. 
3 Select the next Editable text box next to Percent Down. 


4 Inthe Properties inspector, enter down_txt for the instance name. 


PROPERTIES 


F TLF Text ly 
Editable vnen 
s7 POSITION AND SIZE R 


5 Select the Read Only text box next to Monthly Payments. 


6 Inthe Properties inspector, enter monthly_txt for the instance name. 


PROPERTIES 


monthly_txt 


TLF Text Ly 


Read Only | Ea 


<> POSITION AND SIZE A 


Changing the contents of text boxes 


The contents of a text box are represented by its text property. You can dynami- 
cally change a text box’s contents by assigning new text to the text property. In 
this section, you'll add ActionScript that reads the text entered in the Editable text 
boxes next to Rate and Percent Down, perform some mathematical calculations, 
and then display new text in the Read Only text box next to Monthly Payments. 


266 LESSON 7 Using Text 


1 Select the Calculate button on the Stage, and in the Properties inspector, enter 
calculate_btn for the instance name. 


2 Insert a new layer and rename it actionscript. 
3 Select the first keyframe of the actionscript layer and open the Actions panel. 


4 You must first create a few variables to hold numerical information. The 
variables will help you make the mortgage calculations. Variables are created, or 
“declared,” using the var keyword. Enter the code as follows: 


var term:Number=360; 
var price:Number=350000; 
var monthlypayment:Number; 


1 var term: Number=360; 
2 var price:Number=350000; 
3 var monthlypayment : Number; 


5 Create an event listener and function for the Calculate button. You should 
be familiar with event listeners from Lesson 6, but if not, you should review 
the concepts in that lesson before moving on. The event listener and function 
should appear as follows: 


var term: Number=360; 

var price: Number=350000; 

var monthlypayment : Number; 
calculate_btn.addEventListener(MouseEvent.CLICK, calculatemonthlypayment) ; 
function calcuLatemonthlypayment(e:MouseEvent):void { 


NOUS WNE- 


y 


6 Enter code within the function to make the mortgage calculations and display 
the results. The completed code for the event listener and function should be as 
follows: 


calculate_btn.addEventListener(MouseEvent.CLICK, 
calculatemonthlypayment); 
function calculatemonthlypayment(e:MouseEvent):void { 
var loan:Number=price-Number (down_txt.text)/100*price; 
var c:Number=Number(rate_txt.text)/1200; 
monthlypayment = loan*(c*(Math.pow((1+c),term)))/(Math. 
pow((1+c) ,term)-1); 
monthly_txt.text=String(Math. round(monthlypayment) ) ; 


} 
1 var term:Number=360; 
2 var price:Number=350000; 
3 var monthlypayment : Number; 
4 calculate_btn.addEventListener(MouseEvent.CLICK, calculatemonthlypayment); 
5 function calculatemonthlypayment(e:MouseEvent):void { 
6 var loan:Number=price-Number(down_txt.text)/100*price; 
7 var c:Number=Number(rate_txt.text)/1200; 
8 monthlypayment = lLoan*(c*(Math.powCC1+c), term)))/CMath.powC(1+c),term)-1); 
9 monthly_txt.text=String(Math .round(monthlypayment)); 
10 } 
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Don’t get too discouraged looking at the code! Take your time to copy it exactly, or 
you can copy and paste it from the 07End-fla file in the 07End folder. 


It may look complicated, but there are only two important concepts to identify. 
First, the contents of text boxes are referenced by the text property. So down_ 
txt. text refers to the contents in the text box named down_txt, and rate_txt. 
text refers to the contents in the text box named rate_txt. 


Second, text boxes contain text, or String data. To make numeric calculations, you 
must first convert the text to a number using Number (). To convert a number back 
to text, use String(). 


The rest of the surrounding code is algebraic manipulation according to a straight- 
forward mortgage payment formula. 


Testing the calculator 


Now test your movie to see how Flash controls the contents of the named text 
boxes. 


1 Choose Control > Test Movie > in Flash Professional. 


2 Inthe preview movie that appears, enter new values in the text boxes next to 
Rate and Percent Down, and then click the Calculate button. 


MORTGAGE CALCULATOR 


Flash reads the values in the text boxes next to Rate and Percent Down, 
calculates a monthly payment, and displays new text in the text box next to 
Monthly Payments. Try different values to see how much you can afford! 


Loading External Text 


So far, you’ve created an attractive layout with interactive tools for this property 
listing for the realtor. However, the realtor has many more listings, and it would be 
convenient to use the same format to display the information without re-creating a 
new layout for each property. You can load new text from an external file and dis- 
play it in an existing text box, replacing its contents. To display additional listings, 
simply maintain additional text files and load them to be displayed as needed. This 


is an example of dynamic content—content that changes at runtime (in the SWF 
file) rather than being fixed during authortime (in the FLA file). 


In this section, you'll load new content from external text files to replace the prop- 


erty address, information, and description. 


Naming the text boxes 


To change the contents of the text boxes, you first need to give them instance 


names so they can be referenced in ActionScript. You'll provide instance names for 


the address, information, and description of the property listing. 


1 Select the text box at the top of the Stage that contains the address of the 
property listing. 


1198 7™ Avenue, South Slope! 


Rooms: 3 


Beds: 1 


Baths: 1 


Type: Coop Price: $350,000 
Doorman: yes Maint/CC: $500 
Approx. SqFt: 1,100 


2 In the Properties inspector, enter address_txt for the instance name. 


PROPERTIES 


T 


address_txt 


TLF Text 


Read Only 


a 


3 Select the text box below the address that contains the details of the property 


listing. 


198 7" Avenue, South Slope 


Doorman: yes Maint/CC: $500 


Type: Coop x Price: $350,000 | 
Approx. SqFt: 1,100 


Step into this gracious , one bedroom apartment and separated by a manicured garden with a reflecting pool 
immediately feel at home. It has an open, renovated and a grassy recreation area. Many units feature outdoor 


4 Inthe Properties inspector, enter info_txt for the instance name. 


PROPERTIES 


T 


info_txt 


TLF Text 


ly 


Read Only 


v 


aw 
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5 Select the first linked text box of the description of the property. 


198 7" Avenue, South Slope 
Rooms: 3 Type: Coop Price: $350,000 
Beds: 1 Doorman: yes Maint/CC: $500 
Baths: 1 Approx. SqFt: 1,100 
tep into this gracious , one bedroom apariment and arated by a manicured garden with a reflecting pool! 
ediately feel at home. It has an open, renovated d a grassy recreation area. Many units feature outdoor 
itchen that leads into a separate dining alcove perfect ppace-either a private terrace or balcony-to take in the 
for entertaining. The bedroom is large enough for a king Jyiews of the garden, the lake, 


ize bed and much more! There is also a large walk-in ithe Meridien skyline and 
loset in the bedroom. True dining alcove, high ceilings, 7 ‘Hightail Park. Amenities 
i pea utiful wood package includes 

floors, windows underground deeded parking, 
in every room, doorman, concierge services, 
and great closet a fitness center, refrigerated 
space make this a presh Direct storage, and pet sitting services. 
must see! 
Avalon Green is a Location! Location! Location! Close to the red and 
unique vision green line subway and a short walk to Hilltop Shopping 
featuring two Center. Experience Meridien modern living at its finest. 
tasteful buildings 


Embedding the fonts 


When text changes at runtime, you need to embed all the characters of the font 


that the text would potentially use to make sure that the text displays properly. 
1 Select the first linked text box named address_txt. 


2 Inthe Character section of the Properties inspector, click the Embed button. 


~~ CHARACTER 
ERN Times NewRoman E 
Style: 
Opx Leading: 14.0 [pt [7] 


Color: B Tracking: 0 
Highlight: 7] M Auto kern 
Anti-alias: | Readability x 


Size: 


The Font Embedding dialog box appears. You can also choose Text > Font 
Embedding to display the dialog box. 


3 The font used in the selected text box appears on the left side of the dialog box 
(Times New Roman Bold). In the Character ranges section, select Uppercase, 
Lowercase, Numerals, and Punctuation. Click OK. 


Font Embedding 
ol Options | ActionScript ] 
Font: al 
Name: 
| |¥ @ Times New Roman Ponte 
| t 
| Bold (Font 2) = 
Regular (Font 1) Family: |Times New Roman x 
| Style: | Bold Z 


Character ranges: 

All (1088/93514 glyphs) 

[Vi Uppercase [A..Z] (27/27 glyphs) 

[Vi Lowercase [a..z] (27/27 glyphs) 

[Vi Numerals [0..9] (11/11 glyphs) 

[M Punctuation [!@#%...) (52/52 glyphs) 
I] Rasic Latin (A5795 alvnhs) 


Ce 


Also include these characters: 


The character ranges that you've selected will be embedded in the final SWF file. 
Any of the characters in those ranges will display properly in your final Flash 
movie. 


4 Select the first linked text box named description_txt. 
5 Inthe Character section of the Properties inspector, click the Embed button. 


The Font Embedding dialog box appears. The Numerals for Character range 
should already be selected since you embedded those characters for the 
Mortgage Calculator. 


6 In the Character ranges section, select Uppercase, Lowercase, and Punctuation 
in addition to Numerals. Click OK. 


Font Embedding 


+j- Options I ActionScript 
Font: alj 
Name: 
+ O Times New Roman 
Fi 
Bold (Font 2) nae 
Regular (Font 1) Family: | Times New Roman v 
Style: |Regular M 


Character ranges: 

All (1088/93514 glyphs) i 
[Mj Uppercase [A..Z] (27/27 glyphs) 

[Vi Lowercase [a..z] (27/27 glyphs) 

[Mj Numerals [0..9) (11/11 glyphs) 

[Mj Punctuation [!@#%...] (52/52 glyphs) 
F] Rasie Latin (95.195 alvnhs) 

Also include these characters: 


The character ranges that you’ve selected will be embedded in the final SWF 
file. Any of the characters in those ranges will display properly in your final 
Flash movie. 
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@ Note: Make sure 
you save external text 
content as a text-only 
file in an application 
such as SimpleText 
(Mac) or Notepad 
(Windows). Do not 
use Microsoft Word, 
because Word adds 
unnecessary additional 
information to the file 
that interferes with 

its proper loading. If 
you use Word, always 
choose Save As Text 
Only. 
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Loading and displaying external text 


Information for a second property listing is saved in three additional text files in the 


07Start folder. You'll add ActionScript to your movie that loads information from 
those text files. 


1 


Open the file in the 07Start folder called 0O7SampleRealEstate2-address.txt. 


The file contains information about the address of another property listing. 


AOO |__| 07SampleRealEstate2-address.txt 
3764 Cobble Hill Way, Docksides 


Choose Window > Code Snippets. 
The Code Snippets panel appears. 


Expand the Load and Unload folder and double-click the Load External Text 
option. 


CODE SNIPPETS | 

78 

> O Actions 

> © Timeline Navigation 

> Gy Animation 

v Ē Load and Unload 
|Ì Click to Load/Unload SWF or Image 
O Click to Load Image from Library 
LjAce Instance from Library 


|_|] Remove Instance from Stage 


|_|] Load External Text 


> © Audio and Video 


> E Event Handlers 


A new layer named Actions is automatically inserted in the Timeline, and 
the Actions panel opens to display the inserted code snippet. You'll have to 
customize some of the code for it to work for this particular project. 


Y 
* Load External Text 


Loads an external text file and displays it in the Output panel. 


/www. helpexampLes . com with the URL address of the text 
to load 
can be a relative Link or an “http://" link. 


s must be placed inside quotation marks ( ye 


flash/text/Loremipsum.txt” 


var f1_TextLoader:URLLoader = new URLLoader(); 
var fl_TextURLRequest:URLRequest = new URLRequest( 
“http://www. helpexamples .com/flash/text/Loremipsum. txt"); 


f1_TextLoader .addEventListener(Event.COMPLETE, fl_CompleteHandler); 


function f1_CompLeteHandler(event: Event): void 


{ 
var textData:String = new String(fl_TextLoader. data); 
trace(textData); 


} 


A f1_TextLoader . load(f1_TextURLRequest) ; 


4 Replace the URL in line 12 of the code snippet with the filename of the property 
address, 07SampleRealEstate2-address.txt. Make sure you keep the double 
quotation marks surrounding the filename. 

10 
11 var fl_TextLoader:URLLoader = new URLLoader(); 
12 ¥ var f1_TextURLRequest:URLRequest = new URLRequest("@7SampleRealEstate2-address.txt"); 
13 
The code loads the file O7SampleRealEstate2-address.txt. 

5 Replace the trace command in line 19 of the code snippet with the following 
code that assigns the new text to the text box named address_txt: 
address_txt.text = textData; 

16 function f1_CompleteHandler(event: Event): void 

re BY 

18 var textData:String = new String(fl_TextLoader. data); 

19 v address_txt.text = textData; 

20 } 
The contents of the text file, O7SampleRealEstate2-address.txt, will be displayed 
in the text box named address_txt. 

6 In the Code Snippets panel, double-click the Load External Text option again. 

7 A second code snippet appears in the Actions panel that loads a second text file. 

23 

24 y /* Load External Text 

25 | Loads an external text file and displays it in the Output panel 

26 

27 | Instructions: 

28 | 1. Replace “http://www.helpexamples.com/flash/text/Loremipsum.txt" with the URL address of the text 
file you would like to load. 

29 | The address can be a relative Link or an "http://" Link. 

30 | The address must be placed inside quotation marks (""). 

31 | */ 

32 

33 | var fl_TextLoader_2:URLLoader = new URLLoader(); 

34 | var f1_TextURLRequest_2:URLRequest = new URLRequest( 
"http://www. heLpexampLes.com/flash/text/Loremipsum. txt"); 

35 

36 | fl_TextLoader_2.addEventListener(Event.COMPLETE, f1_CompleteHandler_2); 

37 

38 | function f1_ComplLeteHandler_2(event: Event): void 

39 | { 

40 var textData:String = new String(fl_TextLoader_2.data); 

41 trace(textData); 

42 | } 

43 

44 á fl_TextLoader_2.load(fl_TextURLRequest_2); 

45 
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8 


Replace the URL in line 34 with the filename of the property details, 
07SampleRealEstate2-info.txt, and replace the trace command in line 41 with 
the following code that assigns the new text to the text box named info_txt: 


info_txt.text = textData; 


9 


http 
would Like 


s can be a relative ink or an “http: 


var fl_TextLoader_2:URLLoader = new URLLoader(); 
var f1_TextURLRequest_2:URLRequest = new URLRequest("O7SampleRealEstate2-info.txt"); 


f1_TextLoader_2.addEventListener(Event.COMPLETE, fl_CompleteHandler_2); 


function fl_CompleteHandler_2(Cevent:Event):void 
{ 


van iz 


nw String(fl_TextLoader_2.data); 
info_txt.text = textData;: 


} 


f1_TextLoader_2.1load(f1_TextURLRequest_2); 


In the Code Snippets panel, double-click the Load External Text option a third 
time and make the code replacements to load 07SampleRealEstate2-description. 
txt and display the text in description_txt. 


Loads an external text file and displays it in the tput pane 
xamples.com/flash/text/Loremipsum.txt" with the URL address of the text 


e link or 
ide quo 


var fl_TextLoader_3:URLLoader = new URLLoader(); _ 
var fl_TextURLRequest_3:URLRequest = new URLReques&"07SampleRealEstate2-description.txt"); 


fl_TextLoader_3.addEventListener(Event.COMPLETE, fl_CompleteHandler_3); 


function fl_CompleteHandler_3(event:Event):void 


f1_TextLoader_3.load(f1_TextURLRequest_3); 


| 


The three large blocks of code snippets appear in the Actions panel one after the 
other. 


10 Choose Control > Test Movie > in Flash Professional. 


3764 Cobble Hill Way, Docksides 


Rooms: 5 Type: Condo 
Beds: 3 Doorman: yes 
Baths: 2.5 


This mint Designer Dream Three Bedroom/Two and half 
Bath boasts an abundance of pre-war detail. The 
spacious living room is generously sunlit through South 
facing restored casement windows, and features a built- 
in window-seat bordered by custom bookshelves and 
illuminated by overhead recessed lighting. The dining 


a 


area includes a 
specially built 
corner banquet, 
complete with 
additional 
storage. A 
generously sized 
master bedroom 
also enjoys South 
facing windows 


ABOUT THE NEIGHBORHOOD 


Approx.SqFt: 2,600 


Price: $780,000 
Maint/CC: $650 


and includes two deep closets. The second bedroom has 
North facing windows, its own walk-in closet and a wall 
of tailor-made closets and drawers. The windowed 
bathroom boasts subway 
tiled walls, a classic black 
and white tile floor, and a 
large linen closet. The 
enlarged windowed kitchen 
features upgraded stainless 
appliances, including a built- 
in Jenn-Air retrigerator/treezer; showcases black 
granite countertops, custom wood and glass cabinetry, 
and pocketed French doors. Beamed ceilings, ebony 
hardwood planked floors, and a classic layout finish this 
fine Tudor home. 


MORTGAGE CALCULATOR 


Calculate 


Flash loads the three external text files and displays the contents of the text files 
in the targeted text boxes. The listing now displays details for a property on 


Cobble Hill Way instead of 7'* Avenue. 


The photos and Mortgage Calculator still refer to the previous listing, so 


the update to the new property is unfinished. However, you can still see 


in this incomplete example how flexible it is to develop a framework that 


loads external text content and displays it in text boxes on the Stage. Many 


professional Flash projects rely on dynamic content fed from external assets 


such as text files. 
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Review Questions 


uu F&F W N 


What is the extra SWZ file that is required for TLF Text? 

What is the difference between Read Only, Selectable, and Editable TLF Text? 
When do you need to embed fonts, and how do you do it? 

How do you make text wrap around objects in a layout? 


How do you change or read the contents of a text box? 


Review Answers 


1 


The SWZ file is an external ActionScript library that contains information that supports 
TLF Text. If your Flash movie contains TLF Text, it needs the SWZ file to function 
properly. Flash automatically generates the additional file, which should always 
accompany your SWF file. 


Read Only text is for display purposes and doesn’t allow the user to select or edit the 
text. Selectable text allows the user to select and copy text. Editable text allows the user 
to select, copy, delete, and edit the text. The contents of all three kinds of text can be 
changed dynamically with ActionScript. 


Fonts should be embedded for any text that may be edited or changed at runtime, which 
means any Editable text box or any text box whose contents dynamically changes, except 
for text that uses device fonts. Choose Text > Font Embedding or click the Embed 
button in the Properties inspector to display the Font Embedding dialog box. In the 

Font Embedding dialog box, you can choose which font, style, and range of characters to 
embed in your Flash movie. 


You can wrap text around objects such as photos or graphic elements in a layout by 
creating a series of linked text boxes, sometimes called threaded text containers. The links 
establish how overflow text from one text box flows into the next text box. Create the first 
text box, and then click on the small white box in its lower-right corner. After the mouse 
cursor changes to a text box icon, click and drag to add the next linked text box. 


A text box’s contents are determined by its text property, which accepts String values. 
To change or access the contents of a text box, you must first give the text box an instance 
name in the Properties inspector. Then, in ActionScript, you can reference the contents of 
the text box with its instance name, followed by a dot, followed by the keyword text. 
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WORKING WITH 
SOUND AND VIDEO 


Lesson Overview 


In this lesson, you'll learn how to do the following: 


Import sound files 

Edit sound files 

Use Adobe Media Encoder CS5 

Understand video and audio encoding options 

Play external video from your Flash project 
Customize options on the video playback component 
Create and use cue points 

Work with video that contains alpha channels 


Embed video in your Flash project 


This lesson will take approximately three hours to complete. If needed, 


remove the previous lesson folder from your hard drive and copy the 
Lesson08 folder onto it. 


00:01/00:10 © 


» 5 
Guess this animal sound 


Sound 1 ~ RAS ee. oe 
k E y 
Sound 2 | Aw _ < 
MAGELLANIC PENGUINS MANDRILL 
Sound 3 


Sound and video add new dimensions to your 
projects. Import sound files and edit them directly in 
Flash, and use Adobe Media Encoder to compress and 
convert video files to use in Flash. 


EN 


KATANGA LION 


Getting Started 


Start the lesson by viewing the finished animated zoo kiosk. You'll create the kiosk 
by adding sound and video files to a project in Flash. 


1 Double-click the 08End.swf file in the Lesson08/08End folder to play the 
animation. 


Paul Smith 
Zoo Director 


“3 


` 
wat 


AN. k £ 


Pa 
Guess this animal sound 


View the movie of the polar bear with a short soundtrack of an African beat. 
A zoo director introduces himself, and as he speaks, Flash elements appear that 
are synchronized with his talk. 


2 Click a sound button to hear an animal sound. 


3 Click a thumbnail button to view a short movie about the animal. Use the 
interface controls below the movie to pause, continue, or lower the volume. 


In this lesson, you'll import audio files and put them on the Timeline to provide 

the short audio flourish. You'll also learn how to embed sounds in each button. 
You'll use Adobe Media Encoder CS5 to compress and convert the video files to the 
appropriate format for Flash. You'll learn how to work with transparent back- 
grounds in video to create the silhouetted zoo director video. You'll also add cue 
points in the video of the zoo director to trigger other Flash animated elements. 


1 Double-click the 08Start.fla file in the Lesson08/08Start folder to open the initial 
project file in Flash. 


2 Choose File > Save As. Name the file 08_workingcopy.fla, and save it in the 
O8Start folder. Saving a working copy ensures that the original start file will be 
available if you want to start over. 
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Understanding the Project File 


The initial setup of the project has been completed except for the audio and video 
portions and some of the ActionScript code. The Stage is 1000 x 700 pixels. A row 
of buttons of colorful animals is on the bottom row, another set of buttons on the 


left, a title at the top, and a background image of a resting lion. 


45 50 55 75 80 85 
o 


@ videos . Obpenguins gbmandrill  gbtiger Oblion 
q hilights . J home ([bzoodirector [videos nbsounds qlo 

@ sound buttons 

q buttons 

q bottom navbar 

@ title 

@ background photo 


lo la 


The bottom three layers, called background photo, title, and bottom navbar, con- 
tain design elements, text, and images. The next two layers above, called buttons 
and sound buttons, contain instances of button symbols. The videos layer and the 
hilights layer contain several labeled keyframes, and the actions layer contains 
ActionScript that provides the event handlers for the bottom row of buttons. 


If you’ve completed Lesson 6, you should be familiar with the structure of this 
Timeline. The individual buttons on the bottom row are coded so that when the 
user clicks a button, the playhead moves to a corresponding labeled keyframe in the 
videos layer. You'll be inserting content into each of those keyframes. But first you'll 
learn to work with sound. 
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Using Sounds 


You can import several types of sound files into Flash. Flash supports MP3, WAV, 
and AIFF files, which are three common sound formats. When you import sound 
files into Flash, they are stored in your Library panel. You can then drag the sound 
files from the Library panel onto the Stage at different points along the Timeline to 
synchronize those sounds to whatever may be happening on the Stage. 


Importing sound files 

You'll import several sound files to the Library panel, which you'll use throughout 

this lesson. 

1 Choose File > Import > Import To Library. 

2 Select the Monkey.wav file in the Lesson08/08Start/Sounds folder, and click 
Open. 


The Monkey.wav file appears in your Library panel. The sound file is indicated 
by a unique icon, and the preview window shows a waveform—a series of peaks 
and valleys that represent the sound. 


08_workingcopy.fla ly} = & 


Name =| Linkage 
[Æ| BtnLion.jpg 

BtnMandril.jpg 

BtnPenguin.jpg 

BtnTiger.jpg 

Lesson08_assets.ai 


lion.bkground.jpg 
KÉ Monkey.wav 

4 sound_button1 
45 sound_button2 
# sound_button3 
fu) video_button1 
45 video_button2 


3 Click the Play button on the far upper-right corner of the Library preview 
window. 


The sound plays. 
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4 Double-click the sound icon in front of your Monkey.wav file. 


The Sound Properties dialog box appears, providing information on your sound 
file, including its original location, size, and other technical properties. 


Sound Properties 
eu) 
/Volumes/Lesson08/Sounds/Monkey.wav C Cancel > 


Update ) 
Friday, March 23, 2007 6:58 PM well 


5 kHz Mono 8 Bit 4.6 s 25.5 kB ( Import...) 
Compression: | Default B (C Test 


( Stop) 


Will use publish setting: MP3, 64 kbps, Mono 


Device sound: | 1 {2 ( Advanced ` 
5 Choose File > Import > Import To Library and select the other sound files to @ Note: Hold down 


import into your Flash project. Import Elephant.wav, Lion.wav, Africanbeat.mp3, the Shift key to select 
multiple sound files to 


and Afrolatinbeat.mp3. import them all at once. 


Your Library panel should contain all the sound files. 


6 Create a folder in your Library panel and place all the sound files in it to 
organize your Library panel. Name the folder sounds. 


E3] lion.bkground.jpg 

hum) sound_button1 

ium] sound_button2 

5 sound_button3 

lv 24 sounds 

KÉ Africanbeat.mp3 
KÉ Afrolatinbeat.mp3 
KÉ Elephant.wav 
KÉ Lion.wav 
KÉ Monkey.wav 

ium) video_button1 

im) video_button2 

i) video_button3 


Placing sounds on the Timeline 


You can place a sound at any point along the Timeline, and Flash will play that 
sound when the playhead reaches the keyframe. You'll place a sound on the very 
first keyframe to play as the movie starts to provide a pleasant audio introduction 
and set the mood. 


1 Select the videos layer on the Timeline. 
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Where to Find Sound Clips 


If you're looking for interesting sounds 
to use in your Flash movie, you can 

use the free sound files available from 
Adobe. Flash CS5 Professional comes 
preloaded with dozens of useful sounds 
that you can access by choosing 
Window > Common Libraries > Sounds. 
An external library (a library that is 

not connected to the current project) 
appears. 


186 items Fe) 
Name | Linkage 
KÉ Ambience Basketball Game Girls ... 

KÉ Ambience Ocean Shore 01.mp3 

KÉ Animal Dog Bark 26.mp3 

KÉ Animal Mammal Carnivore Cat D... 

KÉ Animal Mammal Carnivore Dog ... 

KÉ Animal Mammal Carnivore Tiger ... 

KÉ Cartoon Drum Roll Tom 04.mp3 

KÉ Cartoon Human Male Baby Talk ... 

KÉ Cartoon Human Male Giggle 03.... 

© y T F 


Simply drag one of the sound files from 
the external library onto your Stage. The 
sound will appear in your own Library 
panel. 


2 Inserta new layer and rename it sounds. 


@ actions 
“1 sounds Fee 
W videos 


q hilights + + Bb pBhome gbzoodirector_plbvideos 
@ sound buttons a 
q buttons .: D 
@ bottom navbar . e Hl 
q title + E 


@] background photo . BL 


3 Select the first keyframe of the sounds layer. 


4 Drag the Afrolatinbeat.mp3 file from the sounds folder in your Library panel 
onto the Stage. 


The waveform of your sound appears on the Timeline. 


TIMELINE 


Qactions |. © ¢ Me gO = 
“1 sounds 
q videos 
T hilights 

T sound buttons 

T buttons 

@ bottom navbar 

q title 

@ background photo 


videos 


geooseegeo 
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5 Select the first keyframe of the sounds layer. 


In the Properties inspector, note that your sound file is now listed on the pull- 
down menu under the Sound section. 


PROPERTIES 
| i Frame @ 


sz LABEL 
Name: 
Type: | Name Ly 
xz SOUND 
Name: ly 
Effect: | None al] 2 
Sync: | Event ly 
Repeat ly] x 1 


44 kHz Mono 16 Bit 10.0 s 15... 


6 Select Stream for the Sync option. 


PROPERTIES 
i Frame @ 


sz LABEL 
Name: 
Type: | Name Ly 
~~ SOUND 
Name: | Afrolatinbeat.mp3 ly 
Effect: | None ll 6 
sme Event p 
= E 


[stream 10.0 s 15... 


The Sync options determine how the sound plays on the Timeline. Use Stream 
sync for long passages of music or narration when you want to time the sound 
with the Timeline. 


7 Move the playhead back and forth on the Timeline. 
The sound plays as you scrub the Timeline. 
8 Choose Control > Test Movie > in Flash Professional. 


The sound plays only for a short while before getting cut off. Because the sound 
is set to Stream, it only plays when the playhead moves along the Timeline, and 
if there are sufficient frames to play. There is a stop action at frame 10 that stops 
the playhead, and hence, stops the sound. 
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Adding frames to the Timeline 


The next step is to extend the Timeline so that the entire sound (or at least the por- 
tions that you desire) plays before the stop action halts the playhead. 


1 Click on the Stage to deselect the Timeline, and then place the playhead 


between frames 1 and 9 by clicking on the top frame numbers. 


sao. 5 10 15 20 25 30 35 40 45 50 55 60 
“1 actions sc ee 3 E als ù 
@ sounds . E 
q videos oe HL OSpenguins —_piSmandrill 
W hilights «+ HL Obhome Obzoodirector Oibvideos gÈsounds Do 
T sound buttons ..: H. 
J buttons ++ He 
q bottom navbar Pe E. 
q title . . E. 
@ background photo . . EB. 


2 Choose Insert > Timeline > Frame, or press F5, to insert frames in all the layers 
between frames 1 and 9. 


3 Insert enough frames so that there are about 50 frames to play the sound before 


the stop action in the second keyframe of the actions layer. 


-RA N EEE E ult 
"1 actions BS TS s A olè 
T sounds + « Bs 
q videos «Ha 
@ hilights ++ Oo |_tbhome gbzoodire 
q sound buttons . BH. 
@ buttons «+ He 
J bottom navbar + +H. 
@ title . 1 
@ background photo . . 


4 Choose Control > Test Movie > in Flash Professional. 


The sound lasts longer because it has more frames to play before the playhead 
stops. 


Clipping the end of a sound 


The sound clip you imported is a bit longer than you need. You'll shorten the sound 
file by using the Edit Envelope dialog box. Then you'll apply a fade so the sound 
gradually decreases as it ends. 


1 Select the first keyframe of the sounds layer. 
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2 Inthe Properties inspector, click the Pencil button. 


[a Frame 


vv LABEL 


Name: L 


Type: [ Name X 


x7 SOUND 


Name: | Afrolatinbeat.mp3 ly 
Effect; | None (2) 


Sync: | Stream ly 
Repeat ly] x 1 


44 kHz Mono 16 Bit 10.0 s 15... 


The Edit Envelope dialog box appears, showing you the sound’s waveform. 
The top and the bottom waveform are the left and right channels of the sound 
(stereo). A timeline is between the waveforms, a pull-down menu of preset 
effects at the left corner, and view options at the bottom. 


Preset effects 
—— it Envelope 
eect (None) = 
T (C Cancel 
channel (Cancel) 


Timeline ST fs ao ae ae ee 
Right 
channel 
(==) jaie 
m|» Rea 
[| 
Play controls View options 
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ja> 3 In the Edit Envelope dialog box, click the Seconds icon. 


a a@z The timeline changes units to show seconds instead of frames. Click the Frames 
icon to switch back. You can switch back and forth, depending on how you 
want to view your sound. 


RID 4 Click the Zoom Out icon until you can see the entire waveform. 
aa Ee The waveform appears to end at around 240 frames, or about 10 seconds. 
a A 
Effect: | None =| eu 
Cancel 


{ 


ja» 


[m>] RREA 


5 Drag the right end of the time slider inward to about frame 45. 


jar 


a 
v 


The sound shortens by being clipped from the end. The sound now only plays 
for about 45 frames. 
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6 Click OK to accept the changes you’ve made. 


The waveform on the main Timeline indicates the shortened sound. 


OOO e530 135) 20 28 30 a AK ASS SO BS: 60 GS) 

w actions | a a 
“1 sounds foe 
. 

. 

. 

. 

. 

. 

. 


q videos 

T hilights 

@ sound buttons 

@ buttons 

@ bottom navbar 

q title 

<% background photo 


gbhome _p\bzoodirector 


CE Isimi Amisi imn] 


Changing the volume of a sound 


The sound will be more elegant if it slowly fades out instead of being abruptly cut 
off. You can change the volume levels through time in the Edit Envelope dialog box. 
Use it to fade in, fade out, or modulate the volume of the left and right channels 
separately. 


1 Select the first keyframe of the sounds layer. 
2 Inthe Properties inspector, click the Pencil button. 
The Edit Envelope dialog box appears. 


3 Select the Frames viewing option, and zoom in on the waveform to see its end 
near frame 45. 
l Edit Envelope 
Cancel 


[m>] Rere 
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4 Click on the top horizontal line of the top waveform above frame 20. 


A box appears on the line, indicating a keyframe for the sound volume. 
Da a al 


5 Click on the top horizontal line of the upper waveform above frame 45 and drag 
it down to the bottom of the window. 


The downward diagonal line indicates the drop in volume from 100% to 0%. 


il 


6 Click on the corresponding keyframe on the lower waveform and drag it down 
to the bottom of the window. 


@ Note: You can 
choose and apply some 
of the preset effects 
from the pull-down 
menu in the Edit , , 
Envelope dialog box. The volume levels for both the left and right channels slowly decrease starting at 
Common effects like frame 20. By frame 45, the volume level is at 0%. 

a fade-in or a fade-out RESON 

are provided for your Test the effects of your sound edits by clicking the Play button on the lower-left 


convenience. side of the dialog box. Click OK to accept the changes. 
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Deleting or changing the sound file 


If you don’t want the sound on your Timeline, or you want to change to a different 
sound, you can make those changes in the Properties inspector. 


1 Select the first keyframe of the sounds layer. 


2 In the Properties inspector, select None in the Name pull-down menu. 
Frame @ 
ry 


vy LABEL 


Name: | 
Type: | Name |+ 
sz SOUND 


Name: 
Africanbeat.mp3 s 
Afrolatinbeat.mp3 
Sync: Elephant.wav f 
Lion.wav 
Monkey.wav 


Effect: 


The sound is removed from the Timeline. 


3 Now let’s add a different sound. Select Africanbeat.mp3 for Name. 


7 SOUND 
Name: None E 
Eien v Africanbeat.mp3 K 
Afrolatinbeat.mp3 | 
Sync: Elephant.wav t] 
Lion.wav 


Monkey.wav 


The Africanbeat.mp3 sound is added to the Timeline. The settings in the Edit 
Envelope dialog box that clip the sound and fade it out remain in effect. 


Setting the quality of the sounds 


You can control how much or how little your sounds are compressed in the final 
SWF file. With less compression, your sounds will be better quality. However, your 
final SWF size will be much larger. With more compression, you'll have poor qual- 
ity sounds but a smaller file size. You must determine the balance of quality and file 
size based on the minimum acceptable level of quality. Set the sound quality and 
compression in the Publish Settings options. 


1 Choose File > Publish Settings. 


The Publish Settings dialog box appears. 
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2 Click the Flash tab and click the Set button for the Audio Stream options. 
Images and Sounds - 


JPEG quality: Q i 80 


(| Enable JPEG deblocking 


Audio stream: MP3, 16 kbps, Mono Eset 


Audio event: MP3, 16 kbps, Mono f- Set: 


|_| Override sound settings 
| Export device sounds 


The Sound Settings dialog box appears. 


3 Change the Bit rate to 64 kbps and deselect the option to Convert stereo to 
mono. Click OK to accept the settings. 


Sound Settings 
n| Compression:| MP3 iy 4 
Use 8kHz sample rate eE 
Preprocessing: C] Convert stereo to mono 
Bitrate: 8 kbps 
16 kbps 
f Quality; 20 kbps 
24 kbps 
ay 32 kbps a 
48 kbps actions 
56 kbps ugging 
Passworc v 64 kbps 
80 kbps 
playback security 112 kbps file 
128 kbps 
ware Acceleratior 160 kbps 


4 Click the Set button for the Audio Event options. 
The Sound Settings dialog box appears. 


5 Change the Bit rate to 64 kbps and deselect the option to Convert stereo to 
mono. Click OK to accept the settings. 


Now both the Audio Stream and Audio Event settings should be at 64 kbps with 
stereo sounds preserved. 


The Africanbeat.mp3 file in particular relies on stereo effects, so keeping both 
the left and right channels is important. 


The Bit rate is measured in kilobits per second, and it determines the quality 
of the sound in your final, exported Flash movie. The higher the bit rate the 
better the quality. However, the higher the bit rate the larger your file becomes. 
For this lesson, change the bit rate to 64 kbps. 


6 Select Override sound settings, and click OK to save the settings. 


Images and Sounds 


JPEG quality: Q 80 


Audio stream: MP3, 64 kbps, Stereo ( Set... 


Audio event: MP3, 64 kbps, Stereo ( Set 


mM Override sound settings 
C Export device sounds 
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The sound settings in the Publish Settings will determine how all your sounds 
are exported. 


7 Choose Control > Test Movie > in Flash Professional. 


The stereo effect of the sound is preserved, and the quality is determined by 
your settings in the Publish Settings dialog box. 


Adding sounds to buttons 


In the kiosk, the buttons appear in a column on the left. You'll add sounds to the 
buttons so that they play whenever the user clicks them. 


1 Inthe Library panel, double-click the icon of the button symbol called 
sound_button1l. 


You enter symbol-editing mode for that button symbol. 


2 The three layers in the button symbol help organize the content for the Up, 


Over, Down, and Hit states. 


@ Text 
@ Highlight . 


TIMELINE | OUTPUT | COMPILER 


“1 sounds 


W Text 
T Highlight 


4 Select the Down frame in your sounds layer and insert a keyframe. 


A new keyframe appears in the Down state of your button. 


w Icon 
W Text 
T Highlight 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 


293 


@ Note: You can 

also add sound to the 
Over state of a button 
symbol, and the sound 
will play whenever the 
mouse cursor hovers 
over the button. 


Drag the Monkey.wav file from the sounds folder in your Library panel to 
the Stage. 


A waveform for the Monkey.wav file appears in the Down keyframe of the 


sounds layer. 


© @O Up Over|Down] Hit 


w Icon «+ 
q Text . E 
@ Highlight . O 


Select the Down keyframe in the sounds layer. 


In the Properties inspector, choose Start for the Sync option. 


«z SOUND 
Name: | Monkey.wav ly 
Effect: | None ly| # 
Sync: Event lial 
EAR Oi 
Stop 
Stream ¢ 4.6 s 25.5 kB 


A Start sync option triggers the sound whenever the playhead enters that 
particular keyframe. 


Choose Control > Test Movie > in Flash Professional. Test the first button to 
hear the monkey, and then close the preview window. 


Edit the sound_button2 and the sound_button3 to add the Lion.wav and the 
Elephant.wav sounds to their Down states. 


Understanding Sound Sync Options 


Sound sync refers to the way the sound is triggered and played. There are several 
options: Event, Start, Stop, and Stream. Stream ties the sound to the Timeline so you 
can easily synchronize animated elements to the sound. Event and Start are used to 
trigger a sound (usually a short sound) to a specific event, like a button click. Event 
and Start are similar except that the Start sync does not trigger the sound if it is 
already playing (so there are no overlapping sounds possible with Start sync). The 
Stop option is used to stop a sound, although you'll use it rarely, if ever. If you want 
to stop a sound with a Stream sync, simply insert a blank keyframe. 
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Understanding Flash Video 


Flash is the most common method of delivering video over the Web. More 


Internet users can view video with Flash than with any other technology including 


QuickTime, Windows Media Player, or RealPlayer. News sites such as the 
New York Times and content-sharing sites such as You Tube all rely on Flash to 
present video. 


Adding video to Flash is easy, whether you want to present straight video alone, or 


whether you want to incorporate it with other animated elements. There are two 


options to display video in Flash. The first option is to keep the video separate from 


your Flash file and use a playback component from Flash to play the video. The 
second option is to embed the video in your Flash file. 


Both methods require that the video be formatted correctly first. The appropriate 
video format for Flash is Flash Video, which uses the extension .flv or the exten- 
sion .f4v. F4V is the latest Flash Video format that supports the H.264 standard, 

a state-of-the-art video codec that delivers high quality with remarkably efficient 
compression. A codec (compression-decompression) is a method computers use 
to compress a video file to save space, and then decompress it to play it back. FLV 
is the standard format for previous versions of Flash and uses the older codecs 
Sorenson Spark or On2VP6. 


Using Adobe Media Encoder 


You can convert your video files to the proper FLV or F4V format using Adobe 
Media Encoder CS5, a stand-alone application that comes with Flash Professional 
CS5. Adobe Media Encoder can convert single files or multiple files (known as 
batch processing) to make your workflow easier. 


Adding a video file to Adobe Media Encoder 


The first step to convert your video file to a compatible Flash format is to add the 
video to Adobe Media Encoder for encoding. 


1 Launch Adobe Media Encoder CS5, which comes installed with Adobe Flash 
Professional CS5. 


@ Note: Flash can 
actually play back 

any video encoded in 
H.264, so your video 
file doesn’t have to 
have the .f4v extension. 
For example, a video 
with a .mov extension 
encoded by QuickTime 
Pro with H.264 is 
compatible with Flash. 
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The opening screen displays a window that lists any current video files that have 
been added for processing. The window should be empty. 


ema} 


Source Name Format Preset Output File Status 


To add items to the render queue, drag files here or click Add. To start encoding, click Start Queue 


Message: 
Video: 
Audio: 

Bitrate: 


Elapsed Queue Time: 00:00:00 


Note: You can also Choose File > Add or click the Add button on the right. 
drag the file directly to , , 
the queue from your A dialog box opens for you to select a video file. 
desktop. 


Navigate to the Lesson08/08Start folder, select the Penguins.mov file, and 
click Open. 


The Penguins.mov file is added to the display list and is ready for conversion 
to an FLV or F4V format. Adobe Media Encoder will automatically begin the 
encoding process if you don’t do anything for two minutes. 

eno 


Source Name Format Preset Output File Status Start Queue 


/Volume..,/Penguins.mov v FLV]. v Fav - {Volume...tart /Penguins.f4v Waiti.. 


Add... 


Duplicate 


Remove 


Settings... 


Message: Queue encoding will start in 1 min 55 sec or press Start Queue to start now. 
Video: 
Audio: 
Bitrate: 


Elapsed Queue Time: 00:00:00 
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Select Adobe Media Encoder CS5 > Preferences. 


The Preferences dialog box appears. The first tab on the left, labeled General, 
will be selected. 


Deselect the option, Start queue automatically when idle for 2.0 Minutes. 
Click OK. 


Preferences 


aa V Increment output file name if file with same name exists 
Media 
Metadata V Remove completed files from queue on exit 


Memory 


Start queue automatically 


Place output files in 


Language Default 


Display Format: 30 fps Drop-Frame Timecode 


User Interface Brightness 


Default Lighter 


Cancel 


The encoder will not start automatically so you can move through this lesson at 
your own pace. 


Converting video files to Flash Video 


In the options under Format, select the FLV/F4V option. 
| Source Name Format Preset Output File Status 
| /Nolume...n08/08Start /Penguins.mov ~ v F4V - Matc Volume...esson08/O8Start/Penquins.f4v Waiting | 


© FLV | F4V, J 


Under the Preset options, choose F4V-Web Medium. 


[Source Name Format Preset Output File Status Start Queue 


nD JORG rar 


/Volume...n08/08Start /Penguins.mov Y FLV | Fav PANZE? volume ni at š 
* F4V - Match Source Attributes (High Quality) 
F4V - Match Source Attributes (Medium Quality) 
FLV - Match Source Attributes (High Quality) 
FLV - Match Source Attributes (Medium Quality) 
F4V - 1080p Source, Quarter Size (Flash 9.0.r115 and Higher) 
F4V - 720p Source, Half Size (Flash 9.0.r115 and Higher) 
F4V - HD 1080p (Flash 9.0.r115 and Higher) 
F4V - HD 720p (Flash 9.0.r115 and Higher) 
F4V - Web Large, NTSC Source (Flash 9.0.r115 and Higher) 
F4V - Web Large, PAL Source (Flash 9.0.r115 and Higher) 
F4V - Web Large, Widescreen Source (Flash 9.0.r115 and Higher) 
F4V - Web Medium (Flash 9.0.r115 and Higher) N. 
F4V - Web Medium, Widescreen Source (Flash 9.0.r115 and Higher) 
FLV - 1080p Source, Quarter Size (Flash 8 and Higher) 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 297 


® Note: If you have 
multiple video files to 
encode to F4V or FLV 
format, you can do so all 
at once and easily with 
Adobe Media Encoder 
in a process known 

as batch processing. 
Each file can even have 
its own settings. Click 
the Add button to add 
videos to the display 
list. Choose a different 
format for each file, 

if desired. Click Start 
Queue to begin the 
batch processing. 


@ Note: You can 
change the status of 
individual files in the 
queue by selecting the 
file in the display list 
and choosing Edit > 
Reset Status or Edit > 
Skip Selection. Reset 
Status removes the 
green check from a 
completed file so it 
can be encoded again, 
whereas Skip Selection 
makes Flash skip that 
particular file in the 
batch processing. 


You can choose one of many standard preset options from the menu. The 
options determine the format (either the newer F4V or the older FLV) and the 
dimensions of the video. The Web Medium option converts your original video 
to 360 pixels wide by 264 pixels high, which is an average size to display video 
in a Web browser. In parentheses, Flash indicates the minimum Flash Player 
version required to play the selected video format. 


Click on the Output File. 


The Save As dialog box appears. You can choose to save the converted file in 
a different location on your computer and choose a different filename. Your 
original video will not be deleted or altered in any way. 


Click Start Queue. 


Flash begins the encoding process. Flash displays the settings for the encoded 
video and shows the progress and a preview of the video. 


Source Name Format Preset Output File Status Stop Queue 


/Volume...n08/O8Start /Penguins.mov FLV | Fav Encoding Fase 


Add... 


Duplicate 


< 


Message: Encoding item 1 of 1 
Video: 360x264, Same as source fps, Progressive 
Audio: AAC, 96 kbps, 44.1 kHz, Stereo 
Bitrate: VBR, 1 Pass, Target 0.40 Mbps, Max 0.60 Mbps 


dir ngu VP Elapsed Time: 00:00:03 Estimated Remaining: 00:00:05 


Elapsed Queue Time: 00:00:04 


When the encoding process finishes, a green check in the display list indicates 
that the file has been converted successfully. You now have the file, Penguins.f4v 
in your Lesson08/08Start folder, along with the original Penguins.mov file. 


Source Name Format Preset Output File Status 


/Nolume...n08/08Start /Penguins.mov FLV | F4V 
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Understanding Encoding Options 


You can customize many settings when converting your original video to the Flash 
Video format. You can crop and resize your video to specific dimensions, just convert 
a snippet of the video, adjust the type of compression and the compression levels, 
and even apply filters to the video. To display the encoding options, choose Edit > 
Reset Status to reset the Penguins.mov file, and then click the Preset selection in the 
display list or choose Edit > Export Settings. The Export Settings dialog box appears. 


20A Export Settings _ 


Y Export Settings 
Format: | FLV | Fav Preset 
N 3 Preset: | F4V— Web Medium (Fla Deg options 
Cropping n > 
a Comments: EE Bj 
options — ee 
Output Name: Penguins.fav 
V Export Video V Export Audio 
Y Summary 
Output: 360x264, Same as source fps, Progressive 
AAC, 96 kbps, 44.1 kHz, Stereo 
VBR, 1 Pass, Target 0.40 Mbps, Max 0.60 Mbps | Summary of 
Tri , Source:Clip, Penguins.mov export settings 
rimmin “00:00: 720x480 (0.9091), 29.97 fps, Progressive, 00;00;0. 
i g 00;00;00;00 44100 Hz, Stereo 
options — i 
4 
Source Range: "Entire Clip Filters 
F = v ~ Gaussian Blur 
Cue Point Name Blurriness: Advanced 
Blur Dimension video and 
Cue audio 
points encoding 
Parameter Names for Use Maximum Render Quality 
Use Frame Blending 
Estimated File Size: 400 KB 
Metadata... Cancel 


Cropping your video 


If you only want to show a portion of your video, you can crop it. If you haven’t 
done so already, choose Edit > Reset Status to reset the Penguins.mov file, and then 
choose Edit > Export Settings so you can experiment with the cropping settings. 


Click the Crop button at the upper-left corner of the Export Settings dialog box. 


ere") Export Sett 


The cropping box appears over the video preview window. 
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2 Drag the sides inward to crop from the top, bottom, left, or right. 


Left: Top Right: Bottom: 


The grayed-out portions outside the box will be discarded. Flash displays the 
new dimensions next to your cursor. You can also use the Left, Top, Right, and 
Bottom settings above the preview window to enter exact pixel values. 


3 If you want to keep the crop in a standard proportion, click the Crop 
Proportions menu and choose a desired ratio. 


Left Top: Right: Bottom 


The cropping box will be constrained to the selected proportions. 


4 Tosee the effects of the crop, click the Output tab or the Switch to Output 
button in the upper-right corner of the preview window. 


Output 


Crop Setting [Change Output Size v 


The preview window shows how your final video will appear. 
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5 The Crop Setting pull-down menu contains options to set how the crop will 
appear in the final output file: 


Output 


Crop Setting Change Output Size v 
Scale To Fit 
Black Borders - 
* Change Output Size 


C 5 


Ke . 


e Scale To Fit adjusts the dimensions of the crop and adds black borders to fit 
the output file. 


e Black Borders adds black bands at either the top (letterbox) or at the sides 
(pillarbox) to fit the crop in the dimensions of the output file. 


e Change Output Size changes the dimensions of the output file to match the 
crop dimensions. 


The Scale To Fit and Black Borders options allow you to resize the output file in 
the Video tab on the right side of the Export Settings dialog box. 


6 Exit the cropping mode without making the crop by clicking the Crop button 
again under the Source tab to deselect it. You will not need to crop the 
Penguins.mov video for this lesson. 


Cue Points 


At the bottom left of the 
Export Settings dialog 
box is an area where you 
can set cue points for 
your video. 


+ = 


Cue Point Name 


Cue points are special 
markers at various 
points along the video. 
With ActionScript, you 
can program Flash to 
recognize when those 
cue points are encountered, or you can navigate to specific cue points. Cue points 
can transform an ordinary, linear video into a true interactive, immersive video 
experience. Later in this lesson, you'll add cue points to your video within Flash 
Professional CS5 when your video is directly on the Stage. 


Parameter Names for: 
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Adjusting video length 


Your video may have unwanted segments at the beginning or the end. You can 
shave off footage from either end to adjust the overall length of your video. 


1 Click and drag the playhead (top yellow marker) to scrub through your video 
to preview the footage. Place the playhead at the desired beginning point of 


your video. 


00;00;06;18 j 


» 
` 
Source Range: "Entire Clip 


Time markers indicate the number of seconds that have elapsed. 


2 Click the Set In Point icon. 


in ` 00;00;06;18 


Source Range Entire Clip 


Source Range: Custom 


Source Range: "Custom 


4 Click the Set Out Point icon. 


A e 00;00;05;13 


Set Out Point 


7 ap 


Source Range: Custom 


The Out point moves to the current position of the playhead. 
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00;00;01;20 


Source Range Custom 


5 You can also simply drag the In and Out point markers to bracket the desired 
video segment. 


The highlighted portion of your video between the In and Out point markers 
will be the only segment of your original video that will be encoded. 


6 Drag the In and Out points back to their original positions, or choose Entire 
Clip from the Source Range pull-down menu, because you do not need to adjust 
the video length for this lesson. 


Setting advanced video and audio options 


The right side of the Export Settings dialog box contains information about the 
original video and summarizes the export settings. 


You can choose one of the preset options from the top Preset menu. At the bottom, 
you can navigate to advanced video and audio encoding options using the tabs. At 
the very bottom, Flash displays the estimated final output size. 


You will export the Penguins.mov file again but at a larger size. 


Y Export Settings 


R Format FLV | F4V 
Preset options 


Preset F4V - Web Medium (Flash 
Comments 


Output Name: 
V Export Video V Export Audio 


Y Summary 


Output: 360x264, Same as source fps, Progressive 
AAC, 96 kbps, 44.1 kHz, Stereo 


Summary of VBR, 1 Pass, Target 0.40 Mbps, Max 0.60 Mbps 


export settings Source: Clip, Penguins.mov 
720x480 (0.9091), 29.97 fps, Progressive, 00;00;06;18 
44100 Hz, Stereo 


Video 


Y Basic Video Settings 


Codec: MainConcept H.264 Video 


r V Resize Video 
Advanced video — 


and audio options Frame Width pixels 


Frame Height pixels 


Use Maximum Render Quality 


Use Frame Blending 


Final output size Estimated File Size: 400 KB 


Metadata... Cancel 


@ Note: You can use 
the left or the right 
arrow keys on your 
keyboard to move 
back or ahead frame by 
frame for finer control. 
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1 Make sure the Export Video and Export Audio boxes are selected. 


V Export Video V Export Audio 


2 Click the Format tab and choose F4V. 


Format 


Y Basic Settings 


Multiplexing FLV 


3 Click the Video tab. 


4 Select Resize Video and click the Constrain option (the blank grey box). Enter 
480 for the Width and click outside the field to accept the change. 


The Height automatically changes to keep the proportions of the video. 


Video 


Y Basic Video Settings 
Codec: MainConcept H.264 Video 
V Resize Video 


Frame Width : pixels 


Frame Height pixels 


5 Click OK. 


Flash closes the Export Settings dialog box and saves your advanced video and 
audio settings. 


6 Click Start Queue to begin the encoding process with your custom resize 
settings. 


Flash creates another F4V file of Penguins.mov. Delete the first one you created 
and rename the second one Penguins.f4v. 


Saving advanced video and audio options 


If you want to process many videos similarly, it makes sense to save your advanced 
video and audio options. You can do that in Adobe Media Encoder. Once saved, 
you can easily apply your settings to other videos in the queue. 


1 Choose Edit > Reset Status to reset the status of your penguin video in the 
queue, then choose Edit > Export Settings. 
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2 In the Export Settings dialog box, click the Save Preset button. 


Y Export Settings 


Format: | FLV | F4V 
Preset Custom 


Comments: | 


Output Name: 


V Export Video V Export Audio 


3 In the dialog box that opens, provide a descriptive name for the video and audio 
options. Click OK. 


Choose Name 


Please name this preset 


Save Filter Settings 


Save FTP Settings 


Cancel 


4 Return to the queue of videos. You can apply your custom settings to additional 
videos by simply choosing the preset from the Preset pull-down menu. 


Start Queue 


Source Name Format Preset Output File Status 


/Volume...n08/08Start /Penguins.mov Y FLV| Fav z 


© AnimalVideo-Resize 


F4V - Match Source Attributes (High Quality) 
F4V - Match Source Attributes (Medium Quality) 

FLV - Match Source Attributes (High Quality) 

FLV - Match Source Attributes (Medium Quality) 

F4V - 1080p Source, Quarter Size (Flash 9.0.r115 and Higher) 


Playback of External Video 


Now that you have successfully converted your video to the correct Flash- 
compatible format, you can use it in your Flash zoo kiosk project. You will have 
Flash play each of the animal videos at the different labeled keyframes on the 
Timeline. 


You will keep your videos external to the Flash project. By keeping videos exter- 
nal, your Flash project remains small, the videos can be edited separately, and the 
videos can maintain different frame rates from your Flash project. 


1 Open your 08_workingcopy.fla project in Flash Professional CS5. 
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2 Select the keyframe labeled penguins in the videos layer. 


bl SL SPT SP RM TE A AL 2 
q actions a | ag i 
T sounds . «- i> 
Ojbpenguins olSmandrill Djotiger 
q hilights . -E Dihome pbzoodirector_gbvideos [sounds 1 
q sound buttons . u 
T buttons . D 
@ bottom navbar . -E 
q title . E 
@ background photo . E 


3 Choose File > Import > Import Video. 


The Import Video wizard appears. The Import Video wizard guides you step by 
step through the process of adding video to Flash. 


_ m _ _ Import Video = m 


Select Video 


Where is your video file? 
®© On your computer: 


TS 
File path: Browse... 


© Load external video with playback component 
O Embed FLV in SWF and play in timeline 
O Import as mobile device video bundled in SWF 


O Already deployed to a web server, Flash Video Streaming Service, or Flash Media Server: 


URL: 
Examples: http://mydomain.com/directory/video.flv 
rtmp://mydomain.com/directory/video.xml 
Learn about Flash Media Server 


Learn about Flash Video Streaming Service 


Launch Adobe Media Encoder _) 


Continue ) ( Cancel 
Smads! 


4 Inthe Import Video wizard, select On Your Computer and click Browse. 


5 In the dialog box, select Penguins.f4v from the Lesson08/08Start folder and 
click Open. 


The path to the video file appears. 


Where is your video file? 
®© On your computer: 
File path: C Browse...) 
/Volumes/Lesson08/08Start/Penguins.f4v 


®© Load external video with playback component 
O Embed FLV in SWF and play in timeline 
O Import as mobile device video bundled in SWF 


306 LESSON 8 Working with Sound and Video 


6 Select the Load external video with playback component option. Click Next or 
Continue. 


7 Inthe next screen of the Import Video wizard, you select the skin, or the 
interface controls for the video. From the Skin menu, select the third option 
from the top, MinimaFlatCustomColorPlayBackSeekCounterVolMute.swf. 


Skinning 


The video's skit 
play controls. ` 
and running is 


To create your 
skin SWF, selec 
the relative pat 


To remove all ç 
"None" from thi 


None 
MinimaFlatCustomColorAll.swf 

BY MinimaFlatCustomColorPayBackSeekCounterVoIMute swf a 
MinimaFlatCustomColorPlayBackSeekCounterVolMuteFull.swf 

url MinimaFlatCustomColorPlayBackSeekMute.swf 
MinimaSilverAll.swf 
MinimaSilverPlayBackSeekCounterVolMute. swf 
MinimaSilverPlayBackSeekCounterVolMuteFull.swf 


The skins fall in three broad categories. The skins that begin with “Minima” are 


the latest designs available in Flash Professional CS5 and include options with 
a numeric counter. The skins that begin with “SkinUnder” are controls that 
appear below the video. The skins that begin with “SkinOver” are controls that 
overlap the bottom edge of the video. A preview of the skin and its controls 
appear in the preview window. 


8 Select color #333333 with a 75% Alpha. Click Next or Continue. 


Minimum width: 304 No minimum height 


Skin: | MinimaFlatCustomColorPlay... [| Color: [EA] 


B i: 


URL: 


9 On the next screen of the Import Video wizard, review the information for the 
video file, and then click Finish to place the video. 


® Note: The skin 

is a small SWF file 

that determines the 
functionality and 
appearance of the 
video's controls. You 
can use one of the skins 
provided with Flash, or 
you can choose None 
from the top of the 
menu. 
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10 Your video with the selected skin appears on the Stage. Place the video on the 
left side of the Stage. 


“Guess this animal sound 
Sound 1 


Sound 2 
Sound 3 


@ Note: When a video An FLVPlayback component also appears in your Library panel. The component 
on the Stage is selected, is a special widget that is used on the Stage to play your external video. 

you can press the 
spacebar to begin or 
pause playback. 


08_workingcopy.fla ly} 8 & 


IPL VPlayback : 2.1020 


36 items p 
_ Name aj Linkage 
iE BtnLion.jpg 
= BtnMandril.jpg 
= BtnPenguin.jpg 
=] BtnTiger.jpg 
[E FLVPlayback fl.video.FLVPlayba 
l Lesson08_assets.ai 
=] lion.bkground.jpg 
#5 sound_button1 
fu) sound_button2 
& sound_button3 
v E sounds 
KÉ Africanbeat.mp3 
«é Afrolatinbeat.mp3 


v 
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11 Click the play button on the skin of your video to preview the video. 


The video plays on your Stage. Use the controls to play, stop, scrub, and change 
the volume of the movie. The ability to preview an external video on the Stage is 
a new feature in Flash Professional CS5. 


12 Choose Control > Test Movie > in Flash Professional. After the musical 
introduction, click the Magellanic Penguins button. 


The video plays the external penguin video with the skin you chose in the 
Import Video wizard. Close the preview window. 


13 The other animal videos have already been encoded (in FLV format) and 
provided in the 08Start folder. Import the Mandrill.flv, Tiger.flv, and Lion.flv 
videos in each of their corresponding keyframes. Choose the same skin as the 
Penguin.f4v video. 


Controlling the video playback 


The FLVPlayback component lets you control which video plays, whether the video 
plays automatically, and other aspects of playback. The options for playback can 

be accessed in the Properties inspector. Individual properties are listed in the left 
column, and their corresponding values are listed in the right column. Select one of 
the videos on the Stage, and then choose among the following options: 


e To change the autoPlay option, deselect the check box. When the check box is 
selected, the video plays automatically. When the check box is deselected, the 
video is paused on the first frame. 


a 5 
~N 


[dnstance Name» 
Instance of: FLVPlayback ëy 


sz POSITION AND SIZE 


D 


X: 35.00 Y: 150.00 


€3 W: 480.00 H: 352.00 


x7 COMPONENT PARAMETERS 


Property | Value | 
align Nter Iv] 
autoPlay 
cuePoints one 
isLive 
preview None 
scaleMode maintainAsp...|_¥ 
skin MinimafFlatCu... J 
skinAutoHide oO 


skinBackgroundAlp... |0.75 
skinBackgroundColor @ 
source Penguins.f4v J 


volume 1 
‘J CF 


® Note: If you don't 
have a skin on your 
video, you can still 
control playback of 
the video on the Stage 
by right-clicking/Ctrl- 
clicking on the video 
and choosing Play, 
Pause, or Rewind. 


@ Note: The FLV 

or FAV files, the 
08_workingcopy.swf 
file, and the skin file are 
all required for your zoo 
kiosk project to work. 
The skin file is published 
in the same folder as 
your FLA file. 
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e To hide the controller and only display it when users roll their mouse cursor 
over the video, select the check box for the skinAutoHide option. 


PROPERTIES | LIBRARY 
Ta) SWF © 
[dnstance Name> 
Instance of: FLVPlayback ey, 
x7 POSITION AND SIZE = 
X: 35.00 Y: 150.00 
(E W: 480.00 H: 352.00 


x7 COMPONENT PARAMETERS 


Property | Value | 
align center ly 
autoPlay M 
cuePoints None 
isLive 
preview None 
scaleMode maintainAsp...| v 


skin imaFlatCu... A 
skinAutoHide 
skinBackgroundAlp.. ~= 5 


skinBackgroundColor iA 
source Penguins.f4v J 


volume ROO _ 


‘J > 


e To choose a new controller (the skin), click the name of your skin file and select 
a new skin in the dialog box that appears. 


e To change the transparency of the skin, enter a decimal value from 0 (totally 
transparent) to 1 (totally opaque) for the skinBackgroundAlpha. 


e To change the color of the skin, click on the color chip and choose a new color 
for the skinBackgroundColor. 


e To change the video file or the location of the video file that Flash looks for to 
play, click the source option. 


In the Content Path dialog box that appears, enter a new filename or click the 
Folder icon to choose a new file to play. The path is relative to the location of 
your Flash file. 


Working with Video and Transparency 


For the various animal videos, you want to show the entire frame with the animals 
in the foreground and the lush environment in the background. But sometimes you 
want to use a video file that doesn’t include a background. For this project, the zoo 
director was filmed in front of a green screen, which was removed using Adobe 
After Effects. When you use the video in Flash, the zoo director appears to be in 
front of the Flash background. A similar effect is used for news weatherpersons, 
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where the background of the video is totally transparent and can show weather 
graphics behind the person. 


Transparencies in video (called alpha channels) are supported only in the FLV for- 
mat using the On2VP6 codec. When encoding a video with an alpha channel from 
Adobe Media Encoder, be sure to choose Edit > Export Settings, click the Video 
tab, and then select the Encode Alpha Channel option. 


Video 
¥ Basic Video Settings 


Codec: On2 VP6 


V Encode Alpha Channel 


V Resize Video 
Frame Width : pixels 


Frame Height : pixels 


You'll import the video file, which is already in FLV format, into Flash for display 
with the playback component. 


Importing the video clip 


Now you'll use the Import Video wizard to import the Popup.flv file, which has 
already been encoded with an alpha channel. 


1 Insert a new layer called popupvideo. 


2 Insert a keyframe at frame 50 and insert another keyframe at frame 86. 


i GW actions 
W sounds . jpe 
E d 
q videos s Dlepenguins Olemandriti 
T hilights 
T sound buttons 
T buttons 
q bottom navbar 
q title 
W background photo 


home Obzoodirector Obvideos DÈsounds 


Efe |e fa 
oe ee ewe 


You'll place the video of the zoo director at the end of the musical introduction 


at the same time the stop action appears (frame 50). The keyframe at frame 86 
ensures that the video of the zoo director disappears from the Stage when the 
animal videos appear. 


3 Select the keyframe at frame 50. 
4 Choose File > Import > Import Video. 


5 Inthe Import Video wizard, select On Your Computer and click Browse. Select 
the Popup.flv file in the Lesson08/08Start folder and click Open. 
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@ Note: If you don't 
stop one video before 
navigating to another 
keyframe containing a 
second video, the audio 
can overlap. To prevent 
overlapping sounds, 
use the command 
SoundMixer. 
stopA11Q) to stop 

all sounds before 
starting a new video. 
The ActionScript in the 
first keyframe of the 
actions layer in your 
08_workingcopy fla file 
contains the correct 
code to stop all sounds 
before navigating to a 
new animal video. 


6 Select Load external video with playback component. Click Next or Continue. 


7 Select the same skin that you’ve been using from the Skin menu and click Next 
or Continue. 


8 Click Finish to place the video. 


The video of the zoo director with a transparent background appears on the 
Stage. 


2 M 
Guess this animal sound 
Sound 1 


Sound 2 
Sound 3 


9 Preview the video on the Stage by clicking the play button on the skin. 
10 Choose Control > Test Movie > in Flash Professional. 


After the musical introduction, the zoo director appears. If you click on one of 
the animal video buttons, the popup video is removed from the Timeline. 


Geiss O00 mg 
video_button1.addEventListener(MouseEvent.CLICK,clickListener1); 
function clickListenerl(Cevent:MouseEvent):void { 


SoundMixer.stopA11() 
gotoAndStopC("penguins"); 


} 


video_button2.addEventListener(MouseEvent.CLICK,clickListener2Z); 
function clickListener2(event :MouseEvent):void { 
SoundMixer.stopAL1() 
gotoAndStopC("mandrill"); 


$ 


a 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 video_button3.addEventListener(MouseEvent.CLICK,clickListener3); 
14 function clickListener3(event:MouseEvent):void { 

15 SoundMixer .stopAll O) 

16 gotoAndStop("tiger"); 

noe } 

18 

19 

20 


video_button4. addEventListener(MouseEvent.CLICK,clickListener4); 
function clickListener4(event:MouseEvent):void { 


n| |21 SoundMixer .stopAll() 
'| 22 gotoAndStop("lion"); 
I E + 
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Using a Green Screen 


Professionals often film people in front of solid green or blue backgrounds so they 
can easily remove, or key, the background in a video editing application such as 
Adobe After Effects. Then the person is merged with a different background. The 
image of the zoo director was filmed in front of a green screen, which was removed 
in After Effects. Follow these steps to use a green screen: 


1 


Shoot footage in front of a green 
screen: 


e Use a green background that is flat, 
smooth, and free of shadows so the 
color is as pure as possible. 


e Minimize the light that reflects off 
the green screen onto the subject. 


e Keep movement to a minimum for 
Flash Video; use a tripod if possible. 


Remove the background in After 
Effects or other video editing 
application: 


e In After Effects, import the file as 
footage, create a new composition, 
and drag it onto the Composition 
Timeline. 


e Create a garbage mask to roughly 
outline the shape and remove most 
of the background. But be sure the 
subject never moves outside the 
mask! 


e Use the Color Range keying 
effect to delete the rest of the 
background. You may need to do 
some fine-tuning with the Matte 
Choker and Spill Suppressor effects. 
A spill suppressor removes the light 
that splashes onto the edges of the 
subject. 


Export the file to FLV format: 


Export the video file to Flash Video 
(FLV) format directly from the video 
editing application. Be sure to select 
Encode Alpha Channel. The alpha 
channel is the selection around the 
subject. Encoding the alpha channel 
ensures that the video exports 
without a background. 
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@ Note: Recall that 
you can add cue points 
to video with Adobe 
Media Encoder. You can 
also add cue points to 
video with ActionScript 
in the Actions panel, 
which is not discussed 
in this book. 


© Note: Ifthe 
FLVPlayback 
component on the 
Stage doesn’t show a 
preview of the video, 
right-click/Ctrl-click on 
the video and make 
sure that the Preview 
option is selected. 


Using Cue Points 


Cue points are special markers that you place in your video that Flash can detect 
with ActionScript. There are two ways to use cue points. Cue points can trigger 
an ActionScript command, letting you synchronize the video with other Flash ele- 
ments. Or, you can jump to particular cue points in the video with ActionScript. 
Both types of cue points add more functionality to video. 


In this section, you'll add cue points to the zoo director video so relevant informa- 
tion can be displayed on the Stage as he speaks. New to Flash Professional CS5 is 
the ability to add cue points directly to video on the Stage. 


Inserting cue points 


There are four points in the zoo director video at which you'll want to synchronize 
the display of additional information. First, when he introduces himself, you'll show 
his name. Second, when he instructs the audience to click on a video, you'll high- 
light the videos. Third, when he refers to the sounds, you'll highlight the sounds. 
Fourth, you'll add a cue point to mark the end of the video. 


1 Select frame 50 (the first keyframe in which the zoo director video appears) of 
the popupvideo layer. 


TIMELINE 


W actions . E 
T sounds te tit il ire fp 

a — 
q videos oe tlepenguins 


@ hilights 
Sl sound buttons 


| 

m] 

ae | 

@ buttons . EB 
| bottom navbar . E 
q title en 
J) background photo . E 


2 Select the video of the zoo director on the Stage. 


Obhome glSzoodirector gl5videos piisounds plo 


3 Click the play button on the skin 
and pause the video when the zoo 
director says, “...my name is Paul 
Smith.” 


The numeric counter that displays 
the elapsed time should read about 
two seconds. 


00;02/00:17 
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4 In the Properties inspector, click the Plus button in the Cue Points section to 
add a cue point at the two-second mark. 


x7 CUE POINTS 

p 1 found 
+-88A 

Name | Time | Type | 


Cue Poin... 00:00:02:00 ActionScript 


A cue point appears in the Cue Points section of the Properties inspector. 


5 Click the name of the cue point in the Properties inspector and rename it 


namecue. 

sz CUE POINTS 

pe) 1 found 
+-mÄ 

| Name | Time | Type 


[namecue | 00:00:02:00 ActionScript 


6 Continue playing the video and pause it when the zoo director says, “...so click 
on a video.” 


Ri EG 
> 


a 


00:12100:17 


The numeric counter that displays the elapsed time should read about 12 


seconds. 
7 Inthe Properties inspector, click the Plus button in the Cue Points section to @ Note: If you need to 
add a cue point at the 12-second mark, and rename the cue point videocue. adjust the time of any of 
the cue points, you can 
xz CUE POINTS click and drag over the 
2 Sfond time or click to enter a 
+-@B time with millisecond 
| Name | Time | Type y precision: 


| namecue 00:00:02:00 ActionScript 
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® Note: In the 
Properties inspector, 
double-click any cue 
point in the Type 
column and your 
video on the Stage 
will immediately jump 
to that particular cue 
point. 


© Note: To delete a 
cue point, select it in 
the Properties inspector 


and click the Minus sign. 


8 Continue playing the video and pause it when the zoo director says, “... click on 
a sound.” 


9 Inthe Properties inspector, add a third cue point and rename it soundcue. The 
third cue point should be at the 14-second mark. 


| CUE POINTS 

[e | 3 found 
+- 

| Name | Time | Type 


namecue 00:00:02:00 ActionScript 


videocue 00:00:12:00 ActionScript 


| 
| 00:00:14:00 ActionScript 


10 Continue playing the video until it reaches the end. In the Properties inspector, 
add a fourth cue point and rename it endcue. 


sz CUE POINTS 
[o 4 found 
+-mÄ 

Name | Time | Type 


namecue 00:00:02:00 ActionScript 
00:00:12:00 ActionScript 
soundcue 00:00:14:00 ActionScript 


00:00:17:00 ActionScript 


videocue 


Detecting and responding to cue points 


Now you'll add the ActionScript to detect the cue points and respond to them. The 
Code Snippets panel can help do much of the ActionScript coding. 


1 Move the playhead to frame 50 and select the video of the zoo director on the 
Stage. In the Properties inspector, enter paulsmithvideo as the instance name. 


PROPERTIES 
E paulsmithvideo 


Instance of: FLVPlayback & 


Y: 200.00 i 


2 Open the Code Snippets panel (Window > Code Snippets). 


sz POSITION AND SIZE 


X: 350.00 
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3 Expand the Audio and Video folder in the Code Snippets panel and double-click 
the On Cue Point Event option. 


Law) ae) 
> Gj Actions 

> (Timeline Navigation 

>» © Animation 


> (Load and Unload 

v Audio and video 
{Click to Play/Stop Sound 
[0 Click to Stop All Sounds 
(On Cue Point Event 
D Click to Play Video 
(Click to Pause video 
(Click to Rewind Video 
(Click to Set Video Source 
[ Click to Seek to Cue Point 
[Create a NetStream Video 

> © Event Handlers 


The Actions panel automatically opens and adds the necessary code to detect 
cue points on your selected video. The stop() command that you see on line 1 
was already present in the Flash file. 


RSERENSRREGRESwcanaue wre 
> 


i 


4 Now you must add conditional statements to check which of the cue points has 
been encountered and respond appropriately. Replace lines 16—19 with the 


following code: 


if Cevent.info.name=="namecue") { 
gotoAndStop("zoodirector") ; 
} 


if Cevent.info.name=="videocue") { 
gotoAndStop("videos") ; 
} 


(code continues on the next page) 
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if Cevent.info.name=="sSoundcue") { 
gotoAndStop("sounds") ; 

} 

if Cevent.info.name=="endcue") { 
gotoAndStop("home") ; 

} 


ACTIONS - FRAME 
nPOvVEGRKRUSY OOO R (Fl Code Snippets | © 
1 stopQ); 
2 * On Cue Point Event Handler 
SE E s the fl_CuePointHandler_4 function defined below each time a cue point is passed in the 
S fied video instance 
4 
5 Instructions 
6 1. Add ur custom code on a new line after the line that says "// Start your custom code" below 
7 The code will execute when cue points are reached in a video that is playing 
g + 
9 
10 import fl.video.MetadataEvent; 
sui 
12 paulsmithvideo.addEventListener(MetadataEvent.CUE_POINT, fl_CuePointHandler_4); 
13 
14 function f1l_CuePointHandler_4(event :MetadataEvent): void 
i { 
16 if Cevent.info.name=="namecue") { 
17 gotoAndStop("zoodirector"); 
nj |18 } 
| 19 if Cevent.info.name=="videocue") { 
20 gotoAndStop("videos"); 
21 } 
22 if Cevent.info.name=="soundcue") { 
23 gotoAndStop(" sounds"); 
24 } 
2 if Cevent.info.name=="endcue") { 
26 gotoAndStop("home"); 
27 
28 } 
29 


The final code checks the name of each cue point as it’s detected, and if there is 
a match, the playhead goes to a specific named keyframe on the Timeline. 


Adding the synchronized Flash elements 


The Timeline already contains several named keyframes. In these keyframes, you'll 
place additional Flash elements that appear as the cue points in the video are 
detected. 
1 Select the keyframe named zoodirector in the hilights layer. 
TIMELINE 
g actions 
T sounds 


WW popupvideo 
videos 


EERE ER IONE ECR 


Sl sound buttons 

T buttons 

@ bottom navbar 

@ title 

@ background photo 
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2 Drag the symbol called zoo director name from the Library panel to the Stage 
and place it close to the video. 


7 


atl 


Paul Smith 
Zoo Director 


00:00/00:00 


The graphic of the name appears when the playhead moves to the zoodirector 
keyframe. 


3 Select the keyframe named videos in the hilights layer. 
mtume Lounpur | compuer eons | MOTION EDATOR | 0 a y 


@ actions 

@ sounds 

@ popupvideo 
q videos 
“1 hilights soe 
T sound buttons 
W@W buttons 

q bottom navbar . 
q title 

q background photo 


e... H.. |D 


LE STEE fmi ETETEA] 


4 Select the Rectangle tool with a red 3.0 stroke and no fill. Draw a rectangle 
around the video buttons to highlight them. 


00:00/00:00 


> le 
MAGELLANIC PENGUINS MANDRILL BENGAL TIGER KATANGA LION 


The rectangular red outline appears when the playhead moves to the videos 
keyframe. 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 319 


5 Select the keyframe named sounds in the hilights layer. 


TIMELINE 


I actions . 
q sounds . 
q popupvideo . 
q videos . 
“1 hilights ye 
. 
. 
. 
. 
. 


© sound buttons 
@ buttons 

@ bottom navbar 

@ title 

@ background photo 


e... oe Be ow -|D 


BEBE SRB88EBO 


6 Draw another rectangle with the same stroke and fill settings around the sound 
buttons to highlight them. 


= 


00:00/00:00 


"Guess this animal sound 
Sound 1 


Sound 2 
Sound 3 


MAGELLANIC PENGUINS 


The rectangular red outline appears when the playhead moves to the sounds 
keyframe. 


7 Choose Control > Test Movie > in Flash Professional. 


As the zoo director speaks, various Flash graphic elements pop up in synchrony. 
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Finishing touches 


At the end of the zoo director’s introduction, he disappears, but the FLVPlayback 
component skin remains. You'll remove the skin and position the video to be better 
integrated with the background. 


1 Select the zoo director video in the popupvideo layer. 


2 Inthe Component Parameters section of the Properties inspector, click the 
Pencil button next to the skin property. 


s7 COMPONENT PARAMETERS 

Property | Value mt 
align center ly 
autoPlay M 
cuePoints [{namecue,00:00:... 
isLive m] 
preview None 
scaleMode [ maintainAsp. ~~. 
skin minmarincu( 2) 
skinAutoHide O 
skinBackgroundAlp... |0.75 
skinBackgroundColor | 
source Popup.flv e 
volume 1 


3 In the dialog box that appears, choose None from the Skin pull-down menu. 


Click OK. 
Cancel 
MinimaFlatCustomColorAll.swf d 
Skin: ¥ MinimaFlatCustomColorPlayBackSeekCounterVolMute.swf 
MinimaFlatCustomColorPlayBackSeekCounterVolMuteFull.swf 
URL: MinimaFlatCustomColorPlayBackSeekMute.swf 
MinimaSilverAll.swf 


The zoo director video no longer has a skin. 
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4 With the Selection tool, move the video so that its bottom edge aligns with the 
top edge of the navigation bar. You'll also want to move the zoo director name 
that appears in the zoodirector keyframe of the hilights layer so it remains close 
to the video. 


Paul Smith 
Zoo Director 


“ Guess this animal sound 
Sound 1 


Sound 2 
Sound 3 


BENGAL TIGER KATANGA Lid 


Without the skin, the illusion of the virtual zoo director greeting us is more 
convincing. 


Embedding Flash Video 


In the previous section, you added cue points to synchronize external video with 
Flash elements on the Stage. Another way to integrate video with Flash elements 

is to use embedded video. Embedded video requires the FLV format and is best 
only for very short clips. The FLV file is saved in the Library panel of your Flash file, 
where you can place it on the Timeline. The video plays as long as there are suf- 
ficient frames on your Timeline. 


Embedding video in Flash is supported by Flash Player versions 6 and later. Keep 
in mind the following limitations of embedded video: Flash cannot maintain audio 
synchronization in embedded video that runs over 120 seconds. The maximum 
length of embedded movies is 16,000 frames. Another drawback of embedding 
your video is the increase in the size of your Flash project, which makes testing 
the movie (Control > Test Movie > in Flash Professional) a longer process and the 
authoring sessions more tedious. 


Because the embedded FLV plays within your Flash project, it is critically impor- 
tant that your FLV have the same frame rate as your Flash file. If not, your embed- 
ded video will not play at its intended speed. To make sure your FLV has the same 
frame rate as your FLA, be sure to set the correct frame rate in the Video tab of 
Adobe Media Encoder. 
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Encoding the FLV for embedding 


You'll embed a short video of a polar bear in the beginning of your zoo kiosk 
project. 


1 Open Adobe Media Encoder. 


2 Click the Add button and choose the polarbear.mov file in the Lesson08/ 
O8Start folder. 


The polarbear.mov file is added to the queue. 


Source Name Format Preset Output File Status Start Queue 


/Volume...n08/O8Start /Penguins.mov Y| FLV | F4v v Waiting 


/Volume...08/08Start /polarbear.mov v FLV | F4v v Waiting 


Add... 
Duplicate 


Remove 


Settings... 


3 Click Preset or choose Edit > Export Settings to open the Edit Export options. 
Click the Format tab and select FLV. 


Format 


Y Basic Settings 


Multiplexing: © FLV 


4 Click the Video tab and set the Frame Rate to 24. Make sure that the Resize 
Video check box is deselected. 


Video 


Encode Alpha Channel 
Resize Video 

Same as source 
Frame Width 


Frame Height 
Frame Rate [fps]: 


Use Maximum Render < 


Use Frame Blending 


Estimated File Size: 2 MB 


The Flash file 08_workingcopy.fla is set at 24 frames per second, so you want 
your FLV to also be at 24 frames per second. 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 323 


5 Deselect Export Audio at the top of the dialog box. Click OK. 


Output Name: 


V Export Video Export Audio 


v Summary 


6 Click Start Queue to encode your video. 


The polarbear.flv file is created. 


Embedding an FLV on the Timeline 


Now that you have an FLV, you can import it into Flash and embed it on the 
Timeline. 


1 Open the file 08_workingcopy.fla. 
2 Select the first frame of the popupvideo layer. 


3 Choose File > Import > Import Video. In the Import Video wizard, select 
On Your Computer and click Browse. Select the polarbear.flv file in the 
Lesson08/08Start folder and click Open. 


4 Inthe Import Video wizard, select Embed FLV in SWF and play in timeline. 
Click Next or Continue. 


Where is your video file? 
© On your computer: 
File path: (__Browse... _) 
/Volumes /Lesson08/O8Start/polarbear.flv 


© Load external video with playback component 
@ Embed FLV in SWF and play in timeline 
© Import as mobile device video bundled in SWF 


5 Deselect Expand timeline if needed and deselect Include audio. Click Next or 
Continue. 


How would you like to embed the video? 


Symbol type: | Embedded video | 


m Place instance on stage 
C Expand timeline if needed 
C) Include audio 
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6 Click Finish to import the video. 


The video of the polar bear appears on the Stage. Use the Selection tool to move 
it to the left side of the Stage. 


Guess this animal sound 


Sound 1 
Sound 2 
Sound 3 


The FLV also appears in your Library panel. 


LIBRARY 


08_workingcopy.fla 


=| Linkage 


Æ| BtnLion.jpg 
Æ| BtnMandril.jpg 
(Æ| BtnPenguin.jpg 


3) BtnTiger.jpg 
© FLVPlayback 
> @ Lesson08_assets.ai 
=] lion.bkground.jpg 
polarbear.flv 
fom) sound_button1 
& sound_button2 


7 Choose Control > Test Movie > in Flash Professional to see the embedded video 
file play from frame 1 to frame 49. 


fl.video.FLVPlayba 


@ Note: You will 

not be able to hear 
audio in the authoring 
environment for 
embedded videos 
containing sound. To 
hear the audio, you 
must choose Control > 
Test Movie > in Flash 
Professional. 
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Using embedded video 


It’s useful to think of embedded video as a multiframe symbol, very much like a 
symbol with a nested animation. You can convert an embedded video to a movie 
clip symbol, and then motion tween it to create interesting effects. 


Next, you'll apply a motion tween to the embedded video so it fades out just before 
the zoo director pops up and speaks. 


1 Select the embedded video of the polar bear on the Stage, right-click/Ctrl-click 
it, and select Create Motion Tween. 


Cut 


Copy 
Paste 


Copy Motion 
Copy Motion as ActionScript 3.0 
Motion 


Motion Special 


Pa 


as Motion Preset 


2 Flash asks to convert the embedded video to a symbol so it can apply a motion 
tween. Click OK. 


The selected item cannot be tweened. You must convert this to a symbol in 
order to tween. Do you want to convert and create a tween? 


C Don't show again. 


3 Flash asks to add enough frames inside the movie clip symbol so that the entire 
video can play. Click OK. 


This video requires 316 frames to display its entire length. The selected 
timeline span is not long enough. Do you want the required number of 
frames automatically inserted into the timeline span? 


C Don't show again. 


A motion tween is created on the layer. 


4 Select the motion tween and click the Motion Editor tab. 
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Collapse all the property categories. Click the Plus button next to Color Effect 
and choose Alpha. 


moron romo 


Property | Value | Ease | Keyframe | Graph 
E AE E E LA 
> Basic motion M [No Ease ly 3 
> Transformation [Mi [No Ease Lv. © 
Color efect - EE 
Filters = | Brightness | 
=t 4 | = 
> Eases = Tint 
i Advanced Color | 
The Alpha property is added to the motion tween. 
6 Select frame 1, and set the Alpha amount to 100%. 
Property | Value | Ease | Keyframe | Graph 
hues A , 10, 98; 
> Basic motion M [No Ease iy © 
» Transformation [Mi [No Ease Ly K5] 
¥ Color Effect = R 
Y Alpha [Mi [No Ease iv 2 
Alphaamount 100% M [No Ease mm «> Bose eee eel 
Filters = dh 
> Eases = R 


7 Select frame 30, right-click/Ctrl-click, and choose Add Keyframe. 


Property | Value | Ease | Keyframe | Graph 
Ler ren. Sy E A ene. Seer ed, Lip eae 
> Basic motion M [No Ease Ly a 
> Transformation M [No Ease ly K5] 
¥ Color Effect = cb 
¥ Alpha M [No Ease Ly a 
Alphaamount 100% M [No Ease A) . S a D A A O E A E S petecee peter ee peter meretee mete 
Filters a 
» Eases = ÈR 
An Alpha keyframe appears at frame 30. 
8 Select frame 49, right-click/Ctrl-click, and choose Add Keyframe. 
Property | Value | Ease | Keyframe | Graph 
5 MELOY mass PO NE Errore efor ic Teer Pm 
> Basic motion M[No Ease iy Ss 
> Transformation M [No Ease iv a 
Y Color Effect ty 
Y Alpha M [No Ease Ly KS] 
Alphaamount 100% M Cno Ease ma y ee Aa Keyframe 
Filters a d 
> Eases = 8 


An Alpha keyframe appears at frame 49. 
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9 Select the last keyframe at frame 49 and drag it down to 0%. 


Filters 


Property | Value | Ease | Keyframe | Graph | 
SA ee LO ES LORE 20 1a, SIRS SOs 1 SS: 40 45 in 
> Basic motion Mi Lo Ease ly KS) 
> Transformation Mi [No Ease Ly 3 
Y Color Effect = È 
Y Alpha [Mi [No Ease Ly Ə 
Alpha amount 0% [Mi [No Ease iv] 40 


> Eases 


The Alpha is set to 0% at the last keyframe so the embedded video fades out 
from frame 30 to frame 49. 


10 Choose Control > Test Movie > in Flash Professional to see the embedded video 
play and fade out. 
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Review Questions 


1 How can you edit the length of a sound clip? 
What is a skin for a video? 


What are cue points and how are they used? 


A WÙ N 


What are the limitations for embedded video clips? 


Review Answers 


1 To edit the length of a sound clip, select the keyframe that contains it and click the 
Pencil button in the Properties inspector. Then move the time slider in the Edit 
Envelope dialog box to clip the sound from the front or from the end. 


2 The skin is the combination of functionality and appearance of video controls, such 
as Play, Fast Forward, and Pause buttons. You can choose from a wide array of 
combinations with the buttons in different positions, and you can customize the skin 
with a different color or level of transparency. If you don’t want viewers to be able to 
control the video, apply None from the Skin menu. 


3 Cue points are special markers that you can add to an external video with Adobe 
Media Encoder or in the Cue Points section of the Properties inspector. You can 
create event listeners in ActionScript that detect when a cue point is encountered and 
respond accordingly, for example, by displaying graphics that are synchronized with 
the video. 


4 When you embed a video clip, it becomes part of the Flash document and is included 
in the Timeline. Because embedded video clips significantly increase the size of the 
document and produce audio synchronization issues, it’s best to embed video only if it 
is very brief and contains no audio track. 


ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 329 


LOADING AND CONTROLLING 
FLASH CONTENT 


Lesson Overview 

In this lesson, you'll learn how to do the following: 

e Load an external SWF file 

e Remove a loaded SWF file 

e Control a movie clip’s Timeline 

e Use masks to selectively display content 

This lesson will take less than an hour to complete. If needed, remove the 


previous lesson folder from your hard drive and copy the Lesson09 folder 
onto it. 


FALL 2009 


le 
ee ps p 


TECH 
INSIDE TESLA MOTORS” 


STUMBLING INTO MARK'S i 
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The star from Double Identity, who prefers 
installing a skylight to the limelight, talks = 
about working on the one of the toughest 

film shoots inhistory, family, and the starlet 
who's not doing a very good job of hiding 

in his bathroom. 


GEAR LIFESTYLE 
FACTS AND FIGURES ABOUT WHAT'S NEW ™ TODAY'S SELF IMPROVEMENT 


Use ActionScript to load external Flash content. By 
keeping Flash content modular, your projects remain 
more manageable and easier to edit. 


Getting Started 


You'll start the lesson by viewing the finished movie. 


1 Double-click the 09End.swf file in the Lesson09/09End folder to view the final 
movie. 
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FACTS AND FIGURES ABOUT WHAT'S NEW "™" 


The project is a fictional online lifestyle magazine called Check. A jazzy 
animation appears on the front page showing four main sections of the 
magazine. Each section on the front page is a movie clip with a nested 
animation. 


The first section is an article on the star of the upcoming movie called Double 
Identity (whose Web site you created in Lesson 4, “Adding Animation”), the 
second section is about a new car, the third section presents some facts and 
figures, and the fourth section is a self-improvement article. 


You can click on each section on the front page to access the content. The inside 
content is not complete, but you can imagine that each section could contain 
more information. Click again to return to the front page. 


2 Double-click the pagel.swf, page2.swf, page3.swf, and page4.swf files in the 
Lesson09/09End folder. 


Each of the four sections is a separate Flash file. Note that the front page, 
09End.swf, loads each SWF file as needed. 
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“Yow team to know work, 
all yout harte to do i meet my mam. 
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Close all the SWF files and open the 09Start.fla file in the Lesson09/09Start 
folder. 


Many of the images, graphic elements, and animations have already been 
completed in this file. You will add the necessary ActionScript to make the Flash 
file load the external Flash content. 


FALL 2009 


Choose File > Save As. Name the file 09_workingcopy.fla and save it in the 
09Start folder. Saving a working copy ensures that the original start file will be 
available if you want to start over. 
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@ Note: To compare 
punctuation, spacing, 
spelling, or any 

other aspects of the 
ActionScript, view the 
Actions panel in the 
09End.fla file. 


Loading External Content 


You'll use ActionScript to load each of the external SWFs into your main Flash 
movie. Loading external content keeps your overall project in separate modules and 
prevents the project from becoming too bloated and difficult to download. It also 
makes it easier for you to edit, because you can edit individual sections instead of 
one, large, unwieldy file. 


For example, if you wanted to change the article on the new car in the second 
section, you would simply open and edit the Flash file page2.fla, which contains 
that content. 


To load the external files, you'll use two ActionScript objects: one called a Loader 
and another called a URLRequest. 


1 Insert a new layer at the top and rename it actionscript. 
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2 Press F9 (Windows) or Option+F9 (Mac) to open the Actions panel. 
3 Type the following line exactly as it appears here: 
var myLoader:Loader=new Loader (); 


This code creates a Loader object and calls it myLoader. 


ACTIONS - FRAME 
ePOvEGRUSF OOO 
1 var myLoader:Loader=new Loader (); 


4 On the next line, type the following lines exactly as they appear here: 


pagel_mc.addEventListener(MouseEvent.CLICK, pagelcontent) ; 
function pagelcontent(myevent:MouseEvent):void { 

var myURL:URLRequest=new URLRequest("pagel. swf") ; 
myLoader.load(myURL) ; 

addChi1d(myLoader) ; 

} 
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ACTIONS - FRAME | 
RBHPOYEGKRIES ¥ OOO MM 
var myLoader:Loader=new Loader (); 
pagel_mc.addEventListener(MouseEvent.CLICK, pagelcontent); 
function pageicontent(myevent :MouseEvent):void { 
var myURL:URLRequest=new URLRequest("pagel. swf"); 
myLoader. Load(myURL); 
addChild(myLoader); 


NOUS WN 


You've seen this syntax before in Lesson 6. On line two, you create a listener 
that detects a mouse click on the object called pagel_mc. This is a movie clip on 
the Stage. In response, the function called pagelcontent is executed. 


The function called pagelcontent does several things: First, it creates a 
URLRequest object with the name of the file you want to load. Second, it loads 
the URLRequest object into the Loader object. Third, it adds the Loader object 
to the Stage so you can see it. 


5 Select the movie clip on the left side of the Stage with the movie star. 


A 


6 Inthe Properties inspector, name it pagel_mc. 


PROPERTIES | LIBRARY = 
ks |pagel_me @ 
k EEE 

Instance of: homeBtn1 | Swap... | 


~ POSITION AND SIZE 


X: 0.0 Y: 102.0 


5 W: 488.6 H: 473.6 


The ActionScript you entered refers to the object called pagel_mc, so you need 
to provide the name to one of the movie clips on the Stage. 
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® Note: You can also 
use the Loader and 
URLRequest objects to 
dynamically load image 
files. The syntax is 
identical. Simply replace 
the SWF filename with 

a JPEG filename, and 
Flash loads the specified 
image. 


@ Note: Adding event 
listeners to movie clips 
can make them respond 
to mouse clicks, but 
your cursor doesn't 
automatically change to 
a hand icon to indicate 
that it is clickable. In the 
Actions panel, set the 
property buttonMode 
to true for each movie 
clip instance to enable 
the hand cursor. For 
example, pagel_ 
mc.buttonMode=true 
makes the hand cursor 
appear when you move 
your mouse over that 
movie clip on the Stage. 


7 Choose Control > Test Movie > in Flash Professional to see your movie so far. 


The front page plays its animation and stops. When you click on the movie star, 
the file called pagel.swf loads and is displayed. 


“Youwwant to know work, 
all yout have to do is meet my mom. 
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8 Close the SWF called 09_workingcopy.swf. 
9 Select the first frame of the actionscript layer and open the Actions panel. 


10 Copy and paste the event listener and the function so you have four distinct 
listeners for each of the four movie clips on the Stage. The four listeners should 
appear as follows: 


pagel_mc.addEventListener(MouseEvent.CLICK, pagelcontent) ; 
function pagelcontent(myevent:MouseEvent):void { 

var myURL:URLRequest=new URLRequest("pagel. swf") ; 
myLoader. load(myURL) ; 

addChi 1d(myLoader) ; 

} 
page2_mc.addEventListener(MouseEvent.CLICK, page2content) ; 
function page2content(myevent:MouseEvent):void { 

var myURL:URLRequest=new URLRequest("page2.swf") ; 
myLoader. load (myURL) ; 

addChi 1d(myLoader) ; 

} 

page3_mc.addEventListener(MouseEvent.CLICK, page3content) ; 
function page3content(myevent:MouseEvent):void { 

var myURL:URLRequest=new URLRequest("page3.swf") ; 
myLoader. load (myURL) ; 

addChi 1d(myLoader) ; 

} 

page4_mc.addEventListener(MouseEvent.CLICK, page4content) ; 
function page4content(myevent:MouseEvent):void { 

var myURL:URLRequest=new URLRequest("page4. swf") ; 
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myLoader. load(myURL) ; 
addChi1d(myLoader) ; 
} 


mPOYEGCRUSY OO 


1 var myLoader:Loader=new Loader (); 

2 pagei_mc.addEventListener(MouseEvent.CLICK, pagelcontent); 
3 function pageicontent(myevent :MouseEvent):void { 

4 var myURL:URLRequest=new URLRequest("pagel.swf"); 

a myLoader . Load(myURL); 

6 addChild(myLoader); 

oom } 

8 page2_mc.addEventListener(MouseEvent.CLICK, page2content); 
9 function page2content(myevent :MouseEvent):void { 
10 var myURL:URLRequest=new URLRequest("page2. swf"); 
11 myLoader. Load(myURL); 

12 addChild(myLoader); 
ion } 


| 14 page3_mc.addEventListener(MouseEvent.CLICK, page3content); 
i 15 function page3content(myevent :MouseEvent):void { 


16 var myURL:URLRequest=new URLRequest("page3.swf"); 
17 myLoader. Load(myURL); 

18 addChild(myLoader); 

19 } 


20 page4_mc.addEventListener(MouseEvent.CLICK, page4content); 
21 function page4content(myevent :MouseEvent):void { 


22 var myURL:URLRequest=new URLRequest("page4. swf"); 
23 myLoader . Load(myURL); 

24 addChild(myLoader); 

come } 


ACTIONS - FRAME 


11 Click on each of the remaining three movie clips on the Stage and name them in 
the Properties inspector. Name the yellow car page2_mc, name the data section 
page3_mc, and name the self-improvement section on the lower left page4_mc. 


Using the Code Snippets Panel 


You can also use the Code Snippets panel to add the inter- 
activity for loading external content. In the Code Snippets 
panel (Window > Code Snippets), click the Load and Unload 
folder to expand its contents. Select a movie clip on the 
Stage and double-click the option Click to Load/Unload 
SWF or Image from the Code Snippets panel. 


Flash automatically names the selected movie clip and adds 
the necessary ActionScript code to load a SWF or an image. 
In the code, simply replace the path and filename in the 
sample code with your own. 


Using the Code Snippets panel can save you time and 
effort, but understanding how the code works and writing 
your own is the only way to begin building more sophisti- 
cated, customized projects. 


CODE SNIPPETS 
“a 
> (Actions 
> (9 Timeline Navigation 
> (Animation 
v © Load and Unload 
|] Click to Load/Unload SWF or Image 
| Click to Load Image from Library 
|) Aca instance From Library 
|] Remove Instance from Stage 
|ì) Load External Text 
> © Audio and Video 
> (59 Event Handlers 
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Positioning of the Loaded Content 


Loaded content is aligned with the registration point of the Loader object that it is 
loaded into. By default, the Loader object is positioned at the registration point of 
the Stage (the top-left corner). Since the four external Flash files (page1.swf, page2. 
swf, page3.swf, and page4.swf) all have the same Stage size as the Flash file that 
loads them, the Stage is completely covered. 


However, you can position the Loader object wherever you want. If you want to 
place the Loader object in a different horizontal position, you can set a new X 
value for the Loader object with ActionScript. If you want to place the Loader in a 
different vertical position, you can set a new Y value for the Loader. Here’s how: In 
the Actions panel, enter the name of the Loader object, followed by a period, the 
property x or y, and then an equals symbol and a new value. 


In the following example, the Loader object called myLoader is repositioned 200 
pixels from the left edge and 100 pixels from the top edge. 


2 var myLoader:Loader=new Loader (); 
3 =myLoader. x=200; 
4 myLoader.y=100; 


When the external content loads, it shows up exactly 200 pixels to the right and 100 
pixels down. 


all yout hatve to do is meet my mom, 


\p he? eee AG tt ww... 


338 LESSON 9 Loading and Controlling Flash Content 


Removing External Content 


Once an external SWF file is loaded, how do you unload it to return to the main 
Flash movie? The easiest way is to remove the Loader object from the Stage, so 

the audience can no longer see it. You will use the command removeChi1ldQ and 
specify the name of the Loader object in between the parentheses to remove it from 
the Stage. 


1 Select the first frame of the actionscript layer and open the Actions panel. @ Note: Another way 
to remove external 
content is to use the 
myLoader.addEventListener(MouseEvent.CLICK, unloadcontent) ; command, unload(). 
i A The code, myLoader. 
function unloadcontent (myevent:MouseEvent):void { 
i unload() removes 
removeChi 1d (myLoader) ; the SWF that is loaded 


} into the Loader object, 
but the Loader object 
remains on the Stage. 


2 Add the following lines to your code in the Script pane: 


ACTIONS - FRAME 


&APOYEGRUSYOOOR 


1 var myLoader:Loader=new Loader (); 
2  pagei_mc.addEventListener(MouseEvent.CLICK, pagelcontent); 
3 function pageicontent(myevent :MouseEvent):void { 
4 var myURL:URLRequest=new URLRequest("pagel.swf"); 
5 myLoader . Load(myURL); 
6 addChild(myLoader); 
eo 
8 page2_mc.addEventListener(MouseEvent.CLICK, page2content); 
9 function pageZcontent(myevent :MouseEvent):void { 
10 var myURL:URLRequest=new URLRequest("page2.swf"); 
11 myLoader . Load(myURL); 
12 addChild(myLoader); 
asi } 
14 page3_mc.addEventListener(MouseEvent.CLICK, page3content); 
15 function page3content(myevent:MouseEvent):void { 
16 var myURL:URLRequest=new URLRequest("page3. swf"); 
’ 17 myLoader.. load(myURL); 
18 addChild(myLoader); 
ESSE } 
20 page4_mc.addEventListener(MouseEvent.CLICK, page4content); 
21 function page4content(myevent:MouseEvent):void { 
22 var myURL:URLRequest=new URLRequest("page4. swf"); 
23 myLoader. Load(myURL); 
24 addChild(myLoader); 
25 


26 myLoader.addEventListener(MouseEvent.CLICK, unloadcontent); 
27 function unloadcontent(myevent :MouseEvent):void { 

28 removeChild(myLoader); 

29 } 


This code adds an event listener to the Loader object called myLoader. When 
you click on the Loader object, the function called unloadcontent is executed. 


The function performs just one action: It removes the Loader object from the 
Stage. 


3 Choose Control > Test Movie > in Flash Professional to preview the movie. 
Click on any of the four sections, and then click on the loaded content to return 
to the main movie. 
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Controlling Movie Clips 


When you return to the front page, you'll see the four sections, so you can click 
another movie clip to load a different section. But wouldn’t it be nice to replay the ini- 
tial animation? The initial animations are nested inside each movie clip, and you can 
control the four movie clips that are on the Stage. You can use the basic navigation 
commands that you already learned in Lesson 6 (gotoAndStop, gotoAndP lay, stop, 
play) to navigate the Timelines of movie clips as well as the main Timeline. Simply 
precede the command with the name of the movie clip and separate them with a dot. 
Flash targets that particular movie clip and moves its Timeline accordingly. 


1 Select the first frame of the actionscript layer and open the Actions panel. 


2 Add to the commands in the function called unloadcontent so the entire 
function appears as follows: 


function unloadcontent (myevent:MouseEvent):void { 


removeChi 1d(myLoader) ; 

pagel_mc.gotoAndPlay(1); 

page2_mc.gotoAndPlay(1) ; 

page3_mc.gotoAndP lay(1) ; 

page4_mc.gotoAndPlay(1) ; 
} 


G2 tie Omo F 

var myLoader:Loader=new Loader (); 
pagei_mc.addEventListener(MouseEvent.CLICK, pagelcontent); 
function pageicontent(myevent :MouseEvent):void { 

var myURL:URLRequest=new URLRequest("pagel.swf"); 
myLoader . Load(myURL); 

addChild(myLoader); 


page2_mc.addEventListener(MouseEvent.CLICK, pageZcontent); 
function page2content(myevent :MouseEvent):void { 

var myURL:URLRequest=new URLRequest("page2.swf"); 
myLoader . Load(myURL); 

12 addChild(myLoader); 

ISEE } 

| 14 page3_mc.addEventListener(MouseEvent.CLICK, page3content); 
15 function page3content(myevent :MouseEvent):void { 


1 
2 
3 
4 
5 
6 
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11 


16 var myURL:URLRequest=new URLRequest("page3.swf"); 
17 myLoader . Load(myURL); 
|| |18 addChild(myLoader); 
i oem } 
20 page4_mc.addEventListener(MouseEvent.CLICK, page4content); 
21 function page4content(myevent :MouseEvent):void { 
| 22 var myURL:URLRequest=new URLRequest("page4. swf"); 
23 myLoader . Load(myURL) ; 
24 addChild(myLoader); 
| oy 


| 26 myLoader.addEventListener(MouseEvent.CLICK, unloadcontent); 
27 function unloadcontent(myevent :MouseEvent):void { 


28 removeChild(myLoader) ; 
| 29 pagel_mc.gotoAndPlay(1); 
| 30 page2_mc.gotoAndPlay(1); 
31 page3_mc.gotoAndPLay(1); 
| 32 page4_mc .gotoAndPlay(1); 
aoe } 
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In this function, which is executed when the user clicks the Loader object, the 
Loader object is removed from the Stage, and then the playhead of each movie 
clip on the Stage moves to the first frame and begins playing. 


3 Choose Control > Test Movie > in Flash Professional to preview the movie. 
Click on any of the four sections, and then click on the loaded content to return 
to the main movie. 


When you return to the main movie, all four movie clips play their nested 
animations. 
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Creating Masks 


Masking is a way of selectively hiding and displaying content on a layer. Masking is 
a way for you to control the content that your audience sees. For example, you can 
make a circular mask and allow your audience to only see through the circular area, 
so that you get a keyhole or spotlight effect. In Flash, you put a mask on one layer 
and the content that is masked in a layer below it. 


Masks can be animated, and the content that is masked can also be animated. So, 
the circular mask can grow bigger to show more content, or the content can scroll 
under a mask like scenery whizzing by a train window. 


Define the Mask and Masked layers 


You'll create a rectangular mask that starts small and grows larger to cover the 
Stage. The resulting effect reveals the contents of the Masked layer slowly, similar 
to a sliding door opening. 
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1 Open the file page2.fla. 


MOTORS 


It's a spring day in San Carlos, California, a small town in Silicon 
Valley and ground zero for the company whose goal is to bring 
high performance driving and no-emissions motoring together, 


AA challenging coupling for sure, but nothing compared to the 
pairthat went outin one of the demo vehicles earlier today: the 
editor of livefastdleattopspeed.com, a caustic, young, endorphin 
junkie who is famidvs for saying, "rll think about the environmnet 
when!'m dead! and the editor of greenlanes.com, a popular blog 
about green vehicles, which recently favorably reviewed the 
Horse and Buggy in a non AprilFoa!'s Day entry. 


A single layer called content contains a movie clip of the second section about 
a new car. 


sad 5 10 


2 Insert a new layer above the content layer and rename it mask. 


‘ content +e 


3 Double-click the icon in front of the layer name. 


The Layer Properties dialog box appears. 


4 Select Mask and click OK. 


Layer Properties 


[Vi Show [] Lock Cancel 


Type: © Normal 


O Masked | 
O Folder 
O Guide 


Outline color: [ij 


View layer as outlines 


Layer height:| 100% |v 
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The top layer becomes a Mask layer. Anything that is drawn in this layer will act 
as a mask for a Masked layer below it. 


wW content 


Double-click the icon in front of the bottom layer named content. 


The Layer Properties dialog box appears. 


Select Masked and click OK. 


Layer Properties 


Name: 


content 


Mi Show [] Lock Cancel 


Type: O Normal 


O Mack 


© Masked 


OU rower 


O Guide 


Outline color: i 


C View layer as outlines 


Layer height: 


100% 


ly. 


The bottom layer becomes a Masked layer and is indented, indicating that it is @ Note: You can also 


affected by the mask above it. 


simply drag a normal 
layer under a Mask layer, 


vimevine | MOTION EDITOR | and Flash will convert it 
sao 5 10 to a Masked layer. 
A mask oe 


Create the mask 


The mask can be any filled shape. The color of the fill doesn’t matter. What’s impor- 
tant to Flash is the size, location, and contours of the shape. The shape will be the 
“peephole” through which you'll see the content on the layer below. You can use 


any of the drawing tools to create your mask. 


1 Select the Rectangle tool. 


2 Choose any color for the Fill and no stroke for the Stroke. 
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3 Select the top Mask layer and draw a thin rectangle just off to the left of the 


Stage. Make the height of the rectangle slightly larger than the Stage. 


Create Shape Tween 


Cut 


Copy 
Paste 


Select All 
Deselect All 


5 Flash asks to convert the rectangular shape to a symbol so you can apply a 
motion tween. Click OK. 


The selected item cannot be tweened. You must convert this to a symbol in 
order to tween. Do you want to convert and create a tween? 


C Don't show again. 


Cancel OK 


The top layer becomes a Tween layer, and one second’s worth of frames is 
added to the Timeline. 


content 
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6 Insert the same number of frames in the bottom layer. 


TIMELINE 


7 Move the playhead to the last frame, frame 24. 
8 Select the Free Transform tool. 
9 Click on the rectangular symbol. 


The free transform handles appear around the rectangular symbol. 


10 Hold down the Alt/Option key and drag the right edge of the free transform 
handle to expand the rectangle to cover the entire Stage. 


The rectangle becomes wider at the last frame. The motion tween creates a 
smooth animation of the rectangle growing wider and covering the Stage. 
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11 To see the effects of the Mask layer on its Masked layer, lock both layers. Scrub 
the red playhead back and forth along the Timeline to see how the motion 
tween uncovers the content in the bottom layer. 


Twent [MOHON oro OOOO 


B content 


12 Insert a new layer and rename it actionscript. 


13 Insert a keyframe at frame 24 of the actionscript layer and open the Actions 
panel. 


Twent [MOTO oro OOOO 


"1 actionscript P 
@, mask 
BB content 


ACTIONS - FRAME 


1 stopQ; 


@ Note: Flash does 15 Choose Control > Test Movie > in Flash Professional. 
not recognize different 
Alpha levels of a mask. 
For example, a mask 
drawn with a fill at 

an Alpha value of 

50% will still mask at 
100%. However, with 
ActionScript you can 
dynamically create 
masks that will allow 
transparencies. Masks 
also do not recognize 
strokes. 


As the motion tween proceeds in the Mask layer, more of the Masked layer 
is revealed, creating a cinematic transition known as a wipe. If you open 
09_workingcopy.fla and choose Control > Test Movie > in Flash Professional, 
and then click on the car movie clip, you'll see that the masking effect is 
preserved even as it is loaded into another Flash movie. 
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Review Questions 


A WwW N 


How do you load external Flash content? 
What are the advantages of loading external Flash content? 
How do you control the Timeline of a movie clip instance? 


What is a mask and how do you create one? 


Review Answers 


1 


You use ActionScript to load external Flash content. You create two objects: a Loader 
and a URLRequest. The URLRequest object specifies the filename and file location of 

the SWF file that you want to load. To load the file, use the 10ad () command to load 
the URLRequest object into the Loader object. Then display the Loader object on the 

Stage with the addChild() command. 


Loading external content keeps your overall project in separate modules and prevents 
the project from becoming too bloated and difficult to download. It also makes it 
easier for you to edit, because you can edit individual sections instead of one, large, 
unwieldy file. 


You can control the Timeline of movie clips with ActionScript by first targeting them 
by their instance name. After the name, type a dot (period), and then the command 
that you desire. You can use the same commands for navigation that you learned in 
Lesson 6 (gotoAndStop, gotoAndP lay, stop, play). Flash targets that particular 
movie clip and moves its Timeline accordingly. 


Masking is a way of selectively hiding and displaying content on a layer. In Flash, you 
put a mask on the top Mask layer and the content in the layer below it, which is called 
the Masked layer. Both the Mask and the Masked layers can be animated. To see the 
effects of the Mask layer on the Masked layer, you must lock both layers. 
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PUBLISHING FLASH 
DOCUMENTS 


Lesson Overview 


In this lesson, you'll learn how to do the following: 


Test a Flash document 

Understand the Bandwidth Profiler 

Change publish settings for a document 
Understand the difference between export file types 
Add metadata 

Publish a SWF file and its HTML file 


Detect the version of Flash Player a viewer has installed 


Publish a self-contained projector file 


This lesson will take less than an hour to complete. If needed, remove the 
previous lesson folder from your hard drive and copy the Lesson10 folder 


onto it. 


ue 


When you've finished your Flash project, publish it as 
a SWF file for a Web site or as a projector for ultimate 
portability, or save frames from the animation as 
image files. 


Getting Started 


In this lesson, you'll publish an animation that has already been completed. The 
project is an animated banner for the familiar fictional city of Meridien, whose 
interactive restaurant guide you created in Lesson 6, and whose realtor site you 
created in Lesson 7. You'll publish the movie for the Web, capture specific frames 
as images, and save the movie so that even viewers who don’t have the Flash Player 
can see it. 


1 Double-click the 10End.html file in the Lesson10/10End folder to open the 


finished project. 
@ Firefox File Edit View History Bookmarks Tools Window Help 
enoe 10End 
(A 4 @ file://localhost/Volumes /Lesson10/10End/10End.html 


Getting Started Flickr Photo Downlo... Latest Headlines Apple» Amazon eBay Yahoo! Newsv 


A Web browser launches and plays the HTML file, which displays the SWF 
file. The HTML file tells the browser how to show the SWF file. Quit the Web 
browser. 


2 Double-click the 10Start.fla file in the Lesson10/10Start folder to open it in 
Flash. 


The project displays video, images, and motion tweens, and all the assets are 
contained within the FLA file. 


3 Choose File > Save As. Name the file 10_workingcopy.fla and save it in the 
10Start folder. Saving a working copy ensures that the original start file will be 
available if you want to start over. 


Testing a Flash Document 


Troubleshooting is a skill you develop over time, but it’s easier to identify the cause 
of problems if you test your movie frequently as you create content. If you test after 
each step, you know which changes you made and therefore what might have gone 
wrong. A good motto to remember is “Test early. Test often.” 
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One fast way to preview a movie is to choose Control > Test Movie > in Flash 


Professional (Ctrl+Enter/Command+Return), as you’ve done in earlier lessons. This 


command creates a SWF file in the same location as your FLA file so you can play 


and preview the movie; it does not create the HTML file or any other files necessary 


to play the movie from a Web browser. 


When you believe you’ve completed your movie or a portion of the movie, take 


the time to make sure all the pieces are in place and that they perform the way you 


expect them to. 


1 


Review the storyboard for the project, if you have one, or other documents that 
describe the purpose and requirements of the project. If such documents do not 
exist, write a description of what you expect to see when you view the movie. 
Include information about the length of the animation, any buttons or links 
included in the movie, and what should be visible as the movie progresses. 


Using the storyboard, project requirements, or your written description, create a 
checklist that you can use to verify that the movie meets your expectations. 


Choose Control > Test Movie > in Flash Professional. As the movie plays, 
compare it with your checklist. Click buttons and links to ensure they behave as 
expected. You should click on every possibility that a user may encounter. This 
process is called QA, or quality assurance. In larger projects, it may be referred 
to as beta testing. 


Choose File > Publish Preview > Default-(HTML) to export a SWF file and an 
HTML file required to play in a browser and to preview the movie. 


A browser opens, if one is not already open, and plays the final movie. 


Upload the two files (the SWF and HTML) to your own Web server and give 
your colleagues or friends the Web site address so they can help you test 

the movie. Ask them to run the movie on different computers with different 
browsers to ensure that all the files are included and that the movie meets the 
criteria on your checklist. Encourage testers to view the movie as though they 
were its target audience. 


If your project requires additional media, for example, FLV or F4V video files, 
skin files for your video, or external SWF files that are loaded, you must upload 
them along with your SWF and HTML file. 


Make changes and corrections as necessary to finalize the movie, upload the 
revised files, and then test it again to ensure it meets your criteria. The iterative 
process of testing and making revisions may not sound like fun, but it is a 
critical part of launching a successful Flash project. 


® Note: The default 
behavior for your movie 
in the Test Movie mode 
is to loop. You can 
make your SWF play 
differently in a browser 
by selecting different 
publish settings, as 
described later in this 
chapter, or by adding 
ActionScript to stop the 
Timeline. 


@ Note: You can 

also just choose File > 
Publish (Shift+F12) to 
export the SWF file and 
the HTML file without 
previewing the movie in 
a Web browser. 
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Understanding the Bandwidth Profiler 


You can preview how your final project might behave under different download 
environments by using the Bandwidth Profiler, a useful panel that is available when 
you are in Test Movie mode. 


View the Bandwidth Profiler 


The Bandwidth Profiler provides information such as the overall file size, the total 
number of frames, the dimensions of the Stage, and how your data is distributed 
throughout your frames. You can use the Bandwidth Profiler to pinpoint where 
there are large amounts of data so you can see where there may be pauses in the 
movie playback. 

1 Choose Control > Test Movie > in Flash Professional. 


Flash exports a SWF and displays your movie in a new window. 


2 Choose View > Bandwidth Profiler. 


Movie: 
Dim: 955 X 310 pixels 
Fr rate: 30.0 fr/sec 
Size: 676 KB (692997 B) 
Duration: 108 fr (3.6 s) 
Preload: 4237 fr (141.2 s) 
Settings: 
Bandwidth: 4800 B/s (160 B/fr) 
State: 
Frame: 58 
10 KB (10412 B) 


A new window appears above your movie. Basic information about your movie 
is listed on the left side of the profiler. A timeline appears on the right side of 


the profiler with gray bars representing the amount of data in each frame. The 
higher the bars the more data is included. 


You can view the graph on the right in two ways: as a Streaming Graph (View > 
Streaming Graph) or as a Frame By Frame Graph (View > Frame By Frame Graph). 
The Streaming Graph indicates how the movie downloads over the Web by show- 
ing you how data streams from each frame, whereas the Frame By Frame Graph 
simply indicates the amount of data in each frame. In Streaming Graph mode, you 
can tell which frames will cause hang-ups during playback by noting which bar 
exceeds the given Bandwidth setting. 
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Test download performance 


You can set different download speeds and test the playback performance of your 
movie under those different conditions. 


1 While in Test Movie mode, choose View > Download Settings > DSL. 


The DSL setting is a type of Internet connection and a measure of the download 
speed that you want to test. It corresponds to 32.6 kilobytes per second. Choose 
higher or lower speeds depending on your target audience. 


2 Choose View > Simulate Download. 


Movie: 
Dim: 955 X 310 pixels 
Fr rate: 30.0 fr/sec 
Size: 676 KB (692997 B) 
Duration: 108 fr (3.6 s) 
Preload: 528 fr (17.6 s) 
Settings: 
Bandwidth: 33400 B/s (1113 B/fr) 
State: 
Frame: 19 
3 KB (3940 B) 
Loaded: 16.0 % (18 frames) 
108 KB (111081 B) 
Streams: 


Flash simulates playback over the Web at the given Bandwidth setting (DSL). A 
green horizontal bar at the top of the window indicates which frames have been 
downloaded, and the triangular playhead marks the current frame that plays. 
Notice that there is a slight delay at frame 1 while the data downloads. Anytime 
a gray data bar exceeds the red horizontal line (the one marked 1.1 KB), there 
will be a slight delay in the playback of your movie. 


Once sufficient data has downloaded, the movie plays, though you may still see 
some pauses when the playhead catches up to the downloaded portions. 


3 Choose View > Download Settings > T1. 


T1 is a much faster broadband connection than DSL, which simulates download 
speeds of 131.2 kilobytes per second. 


4 Choose View > Simulate Download. @ Note: The download 
speeds listed for DSL, 


Flash simulates playback over the Web at the faster speed. Notice that the delay T1, and the other preset 


at the beginning is very brief, and the movie plays almost seamlessly as the options represent 
movie downloads quick enough so the playhead never catches up. Adobe's estimate 
of those standard 

5 Close the preview window. Internet connections. 


You should determine 
the actual speed of 
` your Internet provider. 
Adding Metadata You can customize 
the options and their 
speeds by choosing 
View > Download 
Settings > Customize. 


Metadata is information about data. Metadata describes your Flash file so other 
developers with whom you share your FLA can see details that you want them to 
know, or a search engine on the Web can find and share your movie. Metadata 
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includes a document’s title, a description, keywords, the date the file was created, 
and any other information about the document. You can add metadata to a Flash 
document, and that metadata is embedded in the file. Metadata makes it easier for 
other applications and Web search engines to catalog your movie. 


1 Choose File > Publish Settings or click the Edit button next to Profile in the 
Properties inspector. 


PROPERTIES 


Document 
Fl 


10_workingcopy.fla 
y PUBLISH 


Player: Flash Player 10 


Script: ActionScript 3.0 


Class: 4a 


Profile: Default 
AIR Settings Edit 
ActionScript Settings Edit... 
7 PROPERTIES 
FPS: 30.00 
Size: 955 x 310 px Edit... 
Stage: 


The Publish Settings dialog box appears. 
2 Click the Flash tab. 


Publish Settings 


Current profile:| Default 


Formats |} Flash) HTML | 


Player: Flash Player 10 i) 


Script: | ActionScript 3.0 wa ( Settings...) 


Images and Sounds 


JPEG quality, 9 80 


[] Enable JPEG deblocking 


Audio stream: MP3, 16 kbps, Mono C Set...) 
Audio event: MP3, 16 kbps, Mono ( Set...) 
C Override sound settings 
[_] Export device sounds 
SWF Settings 
MÍ Compress movie 
m Include hidden layers 
F Include XMP metadata ( File Info... 
[C] Export SWC 
Advanced — 
Trace and debug: |_| Generate size report 
C Protect from import 
C Omit trace actions 
[_ Permit debugging 
Password: 
Local playback security: [ Access local files only c=) 
Hardware Acceleration: | None [Z| 


Script time limit: 15 seconds 


Publish ) (Cancel) (OK) 
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3 Inthe SWF Settings, select Include XMP Metadata and click File Info. 


SWF Settings 


m Compress movie 
mM Include hidden layers 


M Include XMP metadata (Fitetnfors) 


[C] Export SWC 


The XMP Metadata dialog box appears. 


Description IPTC IPTC Extension Camera Data Video Data Audio Data Mobily > iz 


Document Title: 
Author: 
Author Title: 


Description: 


Rating: te we k & & 
Description Writer: 


Keywords: 


© Semicolons or commas can be used to separate multiple values 


Copyright Status: | Unknown vj 


Copyright Notice: 


Copyright Info URL: Go To URL... 
Created: 2/1/2010 - 11:42 AM Application: Adobe Flash Professional CS5 
Modified: 2/19/2010 - 11:18 AM Format: application/vnd.adobe.fla 


xmo | Preferences | { Import... | ¥ | L Cancel | 


4 Click the Description tab. 
5 Inthe Document Title field, type Welcome to Meridien. 


6 In the Keywords field, type Meridien, Meridien City, relocation, tourism, 
travel, urban, visitor guide, vacation, city entertainment, destinations. 


Description IPTC IPTC Extension Camera Data Video Data Audio Data | = Mobily MR? 


Document Title: Welcome to Meridien 
Author: 
Author Title: 


Description: 


Rating: te te * * * 


Description Writer: 


Keywords: | Meridien, Meridien City, relocation, tourism, travel, urban, visitor guide, vacation, city entertainment, 
destinations| 


© Semicolons or commas can be used to separate multiple values 
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@ Note: You can 
change the name of the 
published file by typing 
a different filename in 
the boxes. You can also 
change the location 
where the files are 
saved by clicking the 
folder icon. 


7 Enter any other descriptive information in the other fields. Click OK to close the 
dialog box. Click OK to close the Publish Settings dialog box. 


The metadata will be saved with the Flash document and will be available for 
other applications and Web search engines. 


Publishing a Movie for the Web 


When you publish a movie for the Web, Flash creates a SWF file and an HTML 
document that tells the Web browser how to display your Flash content. You need 
to upload both files to your Web server along with any other files your SWF file 
references (such as FLV or F4V video files and skins). The Publish command saves 
all the required files to the same folder. 


You can specify different options for publishing a movie, including whether to 
detect the version of Flash Player installed on the viewer’s computer. When you 
change the settings in the Publish Settings dialog box, they are saved with the 
document. 


Specifying Flash file settings 


You can determine how Flash publishes the SWF file, including which version of 
Flash Player it requires, which version of ActionScript it uses, and how the movie is 
displayed and plays. 


1 Choose File > Publish Settings. 


2 Click the Formats tab and select Flash and HTML. You can also choose to 
publish the file in additional formats. 


Formats| Flash HTML 


Type: File: 

M Flash (swf) 10_workingcopy.swf 
M HTML (.html) 10_workingcopy.html 
_| GIF Image (.gif) 10_workingcopy.gif 
|_| JPEG Image (.jpg) 10_workingcopy.ipg 
_| PNG Image (.png) 10_workingcopy.png 
"| Windows Projector (.exe) 10_workingcopy.exe 
__| Macintosh Projector 10_workingcopy.app 


3 Click the Flash tab. 
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4 Select a version of Flash Player. 


Flash Player 7 
Flash Player 8 
Flash Player 9 


Player ¥ Flash Player 10 = 
Adobe AIR 2 


Script iphone B) 4 Settings...) 
Images and Sounds Flash ite 10 — 
Flash Lite 1.1 
JPEG quality: Flash Lite 2.0 ‘ 80 

Flash Lite 2.1 

Flash Lite 3.0 p P 1 

Audio stream Flash Lite 3.1 (Set... ) 

i Flash Lite 4.0 z $ 

CS) | ae ta ( Set... 


L Override sound settings 
[C Export device sounds 


Some Flash Professional CS5 features will not play as expected in versions of the 


player earlier than Flash Player 10. If you are using the latest features of Flash 
CS5, you must choose Flash Player 10. 


5 Select the appropriate ActionScript version. You’ve used ActionScript 3.0 in 
lessons in this book, so choose ActionScript 3.0. 


| Formats HFlash= HTML 


Player ActionScript 1.0 B 


ActionScript 2.0 
dii ¥ ActionScript 3.0 


eit nee 
kA Settings...) 


Images and Sounds 


JPEG quality: Q z 80 
|_) Enable JPEG deblocking 


Audio stream: MP3, 16 kbps, Mono ( Set...) 
z 7 1 N 
Audio event: MP3, 16 kbps, Mono Set... 


C Override sound settings 


|_| Export device sounds 


6 If you've included sound, click the Set buttons for the Audio stream and Audio 
event to choose the quality of the audio compression. In this interactive banner, 
there is no sound, so there’s no need to change the settings. 


Audio stream: MP3, 16 kbps, Mono Set. 
Audio event: MP3, 16 kbps, Mono ( Set...) 


C Override sound settings 
[C Export device sounds 


7 Select Compress movie if the file is large and you want to reduce download 
times. If you select this option, be sure to test the final movie before 
uploading it. 


8 Select Include XMP metadata if you want to include information that describes 
your movie. 
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@ Note: To learn about 9 Click the HTML tab. 


other template options, 
select one and then 
click Info. 


10 Select Flash Only from the Template menu. 


Formate Flach | HTML) 
Flash For Pocket PC 2003 
Flash HTTPS 


Template SA giao 
Flash Only - Allow Full Screen 


Flash with AICC Tracking 

Flash with FSCommand 

Flash with Named Anchors 

Flash with SCORM 1.2 Tracking 
Dimensions: Flash with SCORM 2004 Tracking 

Image Map 


Snes 


Detecting the version of Flash Player 


Some Flash features require specific versions of Flash Player to play as expected. 


You can automatically detect the version of Flash Player on a viewer’s computer; if 


the Flash Player version is not the one required, a message will prompt the viewer 


to download the updated player. 


1 


Choose File > Publish Settings if the Publish Settings dialog box is not already 
open. 


Click the HTML tab in the Publish Settings dialog box. 
Select Detect Flash Version. 


In the Version fields, enter the earliest version of the Flash Player to detect. 


Formats Flash | HTML 


Template: | Flash Only | Info 


MÍ Detect Flash Version 


Version: 10 . 1 - 0 


Click Publish, and then click OK to close the dialog box. 


Flash publishes several files. Flash creates a SWF file, an HTML file, and an 
additional file named swfobject.js that contains extra JavaScript code that 

will detect the specified Flash Player version. If the browser does not have the 
earliest Flash Player version you entered in the Version fields, a message is 
displayed instead of the Flash movie. All three files need to be uploaded to your 
Web server and are necessary for your movie. 


Changing display settings 


You have many options to change the way your Flash movie is displayed in a 


browser. The Dimensions options and the Scale options work together to deter- 


mine the movie’s size and amount of distortion and cropping. 
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| Formats Flash H HTML 


Template: | Flash Only B] Info 


M Detect Flash Version 


Version: 10 . 1 . |0 
Dimensions; ¥ Match Movie Z] 
Pixels 


Percent 
=y55 sro pixels 


Playback: [| Paused at start M Display menu 
M Loop C Device font 


Window Mode: | Window be 
HTML alignment: | Default Z| 


Scale: ¥ Default (Show all) Z] 
No border 3 
Exact fit tical: 
Flash alignment: No scale hter f) 


m Show warning messages 


1 Choose File > Publish Settings. 
2 Click the HTML tab in the Publish Settings dialog box. 


e Select Match Movie for the Dimensions to play the Flash movie at the exact 
Stage size set in Flash. This is the usual setting for almost all your Flash 
projects. 


e Select Pixels for the Dimensions to enter a different size in pixels for your 
Flash movie. 


e Select Percent for the Dimensions to enter a different size for your Flash 
movie as a percentage of the browser window. 


e Select Default (Show all) for the jane 10_workingcopy S 


e@ 4 @fieinv b TG) Googe O 


Getting Started Flickr Photo Downlo... Latest Headlines) D| 


Scale option to fit the movie in 
the browser window without any 
distortions or cropping to show 
all the content. This is the usual 
setting for almost all your Flash 
projects. If a user reduces the size 


of the browser window, the content 
remains constant but is clipped by 
the window. 


Done 
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e Select Percent for Dimensions and No border for the Scale option to scale 
the movie to fit the browser window without any distortions but with 
cropping of the content to fill the window. 


- S & FF @ ñe:///Volumes/Lacie/ ¥ > [G]* Googe QÙ * 
Getting Started Flickr Photo Downlo... Latest Headlines AppleyY Amazon eBay 


» 


e Select Percent for Dimensions and Exact fit for the Scale option to scale 
the movie to fill the browser window on both the horizontal and vertical 
dimensions. With these options, none of the background color shows, but 
the content can be distorted. 

‘ , 
. . @ X chy @ file:///Volumy > /[G]" Google Q) ¥ 


Getting Started Flickr Photo Downlo... Latest Headlines) Apple 


» 
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e Select Percent for Dimensions and No scale for the Scale option to keep the 
movie size constant no matter how big or small the browser window is. 


8028 10_workingcopy = 


@ 4S @file:///volumes/ackv  [G]* Google Q 


Getting Started Flickr Photo Downlo... Latest Headlines Appley Amazon eBay » 


Done 


Changing Playback settings 


You can change several options that affect the way your Flash movie plays within a 
browser. 


1 Choose File > Publish Settings. 
2 Click the HTML tab in the Publish Settings dialog box. 


Playback: [| Paused at start M Display menu 
MÍ Loop C] Device font 


e Select Paused at start for the Playback option to have the movie pause at the 
very first frame. 


e Deselect Loop for the Playback option to have the movie play only once. 


e Deselect Display menu for the Playback option to limit the options in the 
context menu that appears when you right-click/Ctrl-click on a Flash movie 
in a browser. 


@ Note: In general, it 
is best to control a Flash 
movie with ActionScript 
than to rely on the 
Playback settings in the 
Publish Settings dialog 
box. For example, add a 
stop() command in the 
very first frame of your 
Timeline if you want to 
pause the movie at the 
start. When you test 
your movie (Control > 
Test Movie > in Flash 
Professional), all the 
functionality will be in 
place. 
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Dreamweaver and Flash 


Although Flash provides several options to help display your finished movie within a Web browser, it’s best to 
use a dedicated HTML editor such as Adobe Dreamweaver to position your Flash movie on the page, especially 
when you want to include other information around it. For example, your Flash movie will likely be just one 
component of an overall Web page that also includes information about Meridien City, its history, a map of 
the area, and perhaps a welcome message from the mayor. Dreamweaver can assemble all the different media 
components together on a single HTML page. 


To insert your Flash movie in an HTML page in Dreamweaver, simply choose Insert > Media > Flash. Select your 
SWF file and click OK. Dreamweaver creates the HTML code to point to the SWF file and display it in a browser. 
Many of the same display and playback options are available in the Properties inspector in Dreamweaver. 


Alternative Publishing Options 


By default, Flash creates SWF and HTML files for your project. However, you can 
also choose to save specific frames of the movie as images or to save the file as a 
projector, which can play on computers that do not have Flash Player installed. 


Saving frames as images 


Sometimes you might not want to share an entire movie but want to display a par- 
ticular frame. Exporting a frame as a GIF, JPEG, or PNG image might be useful if 
you need an image for a portfolio or want to provide an end image to a viewer who 
doesn’t have Flash Player. You can also use individual images to compile a story- 
board of multiple scenes to share with a client before the Flash file is interactive. 


1 Choose File > Publish Settings, and then click the Formats tab. Flash (.swf) and 
HTML (.html) are selected by default. 


2 Select GIF Image (.gif), JPEG Image (.jpg), and PNG Image (.png). 


f Formats GIF Flash HTML JPEG = PNG 


Type: File: 

M Flash (.swh) 10_workingcopy.swf 

M HTML (html) 10_workingcopy.html 
Mir Image (.gif) 10_workingcopy.gif La 
M JPEG Image (.jpg) 10_workingcopy.jpg 

m PNG Image (.png) 10_workingcopy.png 

|_| Windows Projector (.exe) 10_workingcopy.exe 

[_] Macintosh Projector 10_workingcopy.app _ | = 


These options export the frame currently selected in the Flash document. For 
additional settings for each of the image formats, click on the tabs at the top. 


362 LESSON 10 Publishing Flash Documents 


Publishing Movies for Mobile Devices 


Although the lessons in this book have been geared toward creating rich, interactive content for the 
Web, you can also use Flash Professional CS5 to develop and publish content for mobile phones or 
mobile devices such as the Apple iPhone, iTouch, or iPad. 


Mobile devices use only a subset of the Flash CS5 features, so rather than publishing a finished Flash 
project for a mobile device, it’s essential that you begin a Flash project with the particular mobile 
device in mind. When you create a new Flash document (File > New), the New Document dialog box 
allows you to choose your target device. 


New Document 


(General| Templates 


Type: Description: 
T ActionScript 3.0 7 


Create a new Flash document (*.fla) in the Flash 


Bi ActionScript 2.0 Document Window. The publish settings will be set for 
kA] Adobe AIR 2 iPhone. Use the iPhone document to develop applications 

iPhone that are deployed on the Apple iPhone and iPod Touch. 
i Flash Lite 4 


k] Adobe Device Central 

kee ActionScript 3.0 Class 

"t ActionScript 3.0 Interface 

bri} ActionScript File 

Bc ActionScript Communication File 
kc] Flash JavaScript File 

= Flash Project 


You can choose a Flash Lite document, which uses a scaled-back version of the Flash Player for mobile 
devices; or an iPhone document, which is specific for creating apps on the iPhone, iTouch, or iPad; or 
you can launch Adobe Device Central, a separate application that lets you browse various devices and 
their requirements. 


Device Library J 


> 


Search 


Creator 


Location Name Flash Display Creator Rating Publi 


ivy Nokia 6110 Flash Lite 2.0 240 x 320 px Adobe were 


Oo Nokia 6121 Flash Lite 2.0 240 x 320 px Adobe thtt 12 


o Nokia 6120c Flash Lite 2.0 240 x 320 px Adobe btto 12, 


ő Nokia 6122 classic Flash Lite 2.0 240 x 320 px Adobe eeree 12 | 


= Oo Nokia 6125 Flash Lite 1.1 128 x 160 px Adobe eeeee 12 


Understanding and creating successful mobile device apps are beyond the scope of this book and 
require obtaining specific developer certificates for distribution. At the time of this writing, Apple 
does not allow apps that are developed from cross-platform technologies like Flash CS5, so make sure 
you understand the latest licensing agreements. To learn more about publishing for mobile devices, 
refer to both Flash Help and Device Central Help. 
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@ Note: Which file 
format you choose 
depends on the type 
of content. If the frame 
contains an illustration 
with flat, simple 
colors, GIF is a good 
option. If the frame is 
more photographic 
and you don’t mind 
compressing image 
data, JPEG or PNG may 
be the best choice. 


3 Click OK to close the Publish Settings dialog box. 


4 Select the last frame in the Timeline (frame 108). This is the frame that Flash 
will export as image files. 


5 Choose File > Publish. Flash publishes the files to the folder that contains the 
Flash document file. 


6 Navigate to the Lesson10/10Start folder. In addition to the SWF and HTML 
files, the folder contains GIF, PNG, and JPEG files. Open the image files to 
view them. 


=e] fae Fare 


Creating a projector 


Most computers have the Flash Player installed with their browsers, but you may 
need to distribute your movie to someone who doesn’t have the Flash Player or 
who has an older version, or you just want your movie to run without a browser. 
You can save your movie as a projector, a stand-alone application that includes all 
the files necessary to play the movie. Because a projector contains all the data to 
play your movie, projector files are larger than SWF files. 


1 Choose File > Publish Settings, and click the Formats tab. 


2 Deselect GIF, JPEG, and PNG. Select Windows Projector and Macintosh 
Projector. 


Formats. Flash HTML 


Type: File: 

M Flash (.swf) 10_workingcopy.swf G 
Í HTML (.html) 10_workingcopy.html (4 
|_| GIF Image (.gif) 10_workingcopy.gif o] (2 
C JPEG Image (.jpg) 10_workingcopy.jpg (4 
(C PNG Image (.png) 10_workingcopy.png (3 
Windows Projector (.exe) 10_workingcopy.exe e) 
M Macintosh Projector 10_workingcopy.app L 
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Projectors and TLF Text 


The interactive banner in this lesson doesn’t contain any TLF Text. However, if your movie includes 
TLF Text and you want to create a projector, you must merge the Text Layout SWF into the projector. 
The Text Layout SWF contains the necessary code that supports the new TLF Text engine. Click the 
Edit button for ActionScript Settings in the Properties inspector or the ActionScript Settings button in 


the Publish Settings dialog box. 


PROPERTIES | (LIBRARY | 


Document 
Fl 
10End.fla 


vy PUBLISH 
Player: Flash Player 10 Publish Settings 
Script: ActionScript 3.0 | 
Current profile: | Default rH h+ Ge 
Class: Pd 
| | Formats HFlash=! HTML GIF PNG JPEG | 
Profile: Default Edit... 


AIR Settings E = = == - 
Player: | Flash Player 10 Z) fe 
ActionScript Settings Edita | 
Script: | ActionScript 3.0 Z| QSettings en) 


s7 PROPERTIES 


In the Advanced ActionScript 3.0 Settings dialog box that appears, select Merged into code for the 
Default linkage in the Runtime Shared Library Settings near the bottom. 


Runtime Shared Library Settings Runtime shared library (RSL) 
Default linkage: RAL Gr UI 


Te 
ae 


Praloader SWE 


Preloader method: 


Preloader SWF: 


The TLF Text engine that is listed in the display window now shows that its Link Type is to be merged 
into code rather than linked to a shared external library. This means that the code for the TLF Text 


engine will be included in the single projector file. 


Source path | Library path | Config constants | 


SWC files or folders containing SWC files - 


>  S(AppConfig)/ActionScript 3.0/libs 
> Š. 
LZ] textLayout.swe - $(AppConfig)/ActionScript 3.0/libs/11.0 
BA Feature: TLF Text 
© Link Type: Uses default (Merged into code) 
@ RSL URL: (n/a) 
[A] Policy File URL: (n/a) 


Refer back to Lesson 7 for more information about TLF Text and the additional Text Layout SWF. 
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Click Publish. 
When the file has been published, click OK to close the dialog box. 
Open the Lesson10/10Start folder. 


a u A U 


Open the projector file for your platform (Windows or Mac). The Windows 
Projector file has an .exe extension and the Mac Projector file has an .app 
extension, though your operating system may hide the extension in the 
filename. 


Both the Windows and the Mac projectors can be double-clicked to play 
without a browser. You can share the projectors on portable media such as a 
CD or DVD. You can use these publishing methods to finalize any Flash projects 
you create and share them with the world. 


Next steps 


Congratulations! You’ve made it through the last lesson. By now you’ve seen how 
Flash Professional CS5, in the right creative hands, has all the features to produce 
media-rich, interactive projects. You’ve completed these lessons—many of them 
from scratch—so you understand how the various tools, panels, and ActionScript 
work together for real-world applications. 


But there’s always more to learn. Continue practicing your Flash skills by creat- 
ing your own animation or interactive Web site. Get inspired by seeking out Flash 
movies on the Web. Expand your ActionScript knowledge by exploring the Adobe 
Flash Help resources and other fine Adobe Classroom in a Book manuals. 
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Review Questions 


1 What is the Bandwidth Profiler, and why is it useful? 


2 What files do you need to upload to a server to ensure your final Flash movie plays as 
expected in Web browsers? 


3 How can you tell which version of Flash Player a viewer has installed, and why is it 
important? 


4 Define metadata. How do you add it to a Flash document? 


5 What is a projector file? 


Review Answers 


1 The Bandwidth Profiler provides information such as the overall file size, the total 
number of frames, the dimensions of the Stage, and how your data is distributed 
throughout your frames. You can use the Bandwidth Profiler to preview how your final 
project might behave under different download environments. 


2 To ensure your movie plays as expected in Web browsers, upload the Flash SWF file 
and the HTML document that tells the browser how to display the SWF file. You also 
need to upload the swfobject.js file, if one was published, and any files your SWF file 
references, such as video or other SWF files; be sure that they are in the same relative 
location (usually the same folder as the final SWF file) as they were on your hard drive. 


3 Select Detect Flash Version in the HTML tab in the Publish Settings dialog box to 
automatically detect the version of Flash Player on a viewer’s computer. Some Flash 
features require specific versions of Flash Player to play as expected. 


4 Metadata is information about data. Metadata includes a document's title, a 
description, keywords, the date the file was created, and any other information about 
the document. Metadata in a Flash document is published with the Flash file, making 
it easy for search engines to search and share your movie. To add metadata to a Flash 
document, choose File > Publish Settings, click the Flash tab, and select File Info under 
the SWF Settings. In the XMP Metadata dialog box that appears, enter the information 
you want to include. 


5 A projector is a stand-alone application that includes all the information necessary to 
play the movie without a browser, so people who don’t have the Flash Player or who 
don’t have the current version can view your movie. 
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INDEX 


NUMBERS 


3D motion, animating, 144-146 
3D position, changing for objects, 97 
3D rotation, changing for objects, 95-96, 98 
3D space 
positioning in, 95-100 
x, y, and z axes in, 95 
3D Translation tool, using, 98 


A 


Actions panel 
Actions toolbox, 212 
components of, 211 
Script pane, 211-212 

ActionScript 3.0 
Actions panel, 211-212 
arguments, 209 
brackets, 210 
checking syntax, 217 
checking syntax of scripts, 211 
Code Snippets panel, 223-225 
comments (//), 210 
comparing aspects of, 334 
controlling Flash movies with, 361 
curly brackets, 210 
doing multiple replacements in, 228 
dot operator (.), 210 
explained, 10 
Find and Replace command, 228 
formatting code, 217 
functions, 209 
keywords, 209 
methods, 210 
multiline comments (/* */), 210, 225 
navigating Actions panel, 211—212 
objects, 210 
Options button, 211 
overview, 208—209 
parentheses, 210 
properties, 210 
quotation marks, 210, 221 
referencing frame labels in, 221 
Script navigator, 211-212 
scripting syntax, 210-211 


semicolons, 210 
terminology, 209-210 
variables, 209, 267 
writing scripts in Action panel, 211 
ActionScript library, merging with SWF file, 
238-240 
Adobe Application Manager, checking for 
updates, 40 
Adobe certification, levels of, 6 
Adobe Community Help, consulting, 5 
Adobe Flash. See Flash 
Adobe Illustrator. See Illustrator 
Adobe Media Encoder, adding video files to, 
295-297 
Adobe resources, 5-6 
After Effects, removing backgrounds in, 313 
Align panel, using with objects, 58-59 
alpha channels. See transparencies 
alpha values, modifying for fills, 66—67 
Alt, using with Free Transform tool, 47 
Anchor Point tools, using with bones and 
shapes, 172 
anchor points, deleting and adding, 65 
animated buttons, using, 230-232. See also 
buttons 
animating 
3D motion, 144-146 
changes in rotation, 119-122 
changes in scale, 119-122 
filters, 114—117 
transformations, 119-122 
transparency, 112-114 
animation duration, changing, 109-110 
animations 
adding frames to, 110-111 
changing rotation of path, 124-125 
changing scale, 124—125 
of cityscape, 106-109 
creating in movie clip symbols, 231-232 
creating inside movie clips, 129-132 
editing path of motion, 125-126 
motion tweens, 105 
moving keyframes in, 111 
moving path of motion for, 123-124 
nesting, 129-132 
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orienting objects to path, 
126-127 
overview, 105 
playing at destinations, 226—230 
of position, 106-109 
previewing, 34—35, 147 
stopping, 229-230 
swapping tween targets, 127-129 
using Motion Presets with, 123 
workflow for, 105 
armature hierarchy, 157 
armatures 
adding bones to, 173 
authortime and runtime, 176-177 
controlling easing for, 177-179 
defined, 153 
editing, 161, 173 
refining spring values for, 
190-191 
removing bones from, 173 
articulated motion, defining bones 
for, 153-157 
audio files 
preventing overlapping with 
video, 312 
setting advanced options for, 
303-304 
authortime armatures, using, 
176-177 
autoPlay option, changing for video, 
309 


B 


Bandwidth Profiler 
testing download performance, 
353 
viewing, 352 
Bind tool, using to refine shape 
behavior, 174-175 
Bit rate, measurement for sounds, 
292 
bitmap fill, adding, 54 
Bitmap Properties dialog box, 
displaying, 29 
bitmaps 
converting to vector graphics, 81 
swapping for interactive movies, 
202-204 
blend effects 
overview, 93 
using with layers, 78-80 
Blur filter 
applying, 93-94 
applying to instance, 115 


INDEX 


bones 
adding to armatures, 173 
armature hierarchy for, 157 
defining for articulated motion, 
153-157 
defining inside shapes, 168-171 
editing, 173 
redefining control points for, 
174-175 
refining shape behavior for, 174 
removing, 161 
removing from armatures, 173 
border decorations, creating, 61-62 
Break Apart option 
using with objects, 60 
using with text, 240 
button instances 
naming in interactive movies, 
207-208 
placing in interactive movies, 
205-206 
button symbols. See also invisible 
buttons; symbols 
creating for interactive movies, 
197-201 
Hit keyframe, 201 
using, 76 
buttons. See also animated buttons 
adding sounds to, 293-294 
creating event handlers for, 
214-217 
duplicating for interactive 
movies, 202 


C 


certification, levels of, 6 
Character ranges, selecting for 
external text, 271 
characters 
changing orientation of, 243 
modifying, 244—246 
cityscape, animating, 106-109 
Code Snippets panel 
using with external content, 337 
using with external text, 272-275 
using with home button, 223-225 
Color Effect, creating via Motion 
Editor, 113 
colors 
applying for gradient transitions, 
52 
matching for existing objects, 67 
Colors area in Tools panel, options 
in, 32 


columns, adding for text, 246-249 
content. See external content 
Convert to Symbol command, using, 
ZI 
Copy and Paste, using, 48 
cropping video files, 299-301 
cue points 
adding synchronized Flash 
elements, 318-320 
deleting, 316 
described, 301 
detecting, 316-319 
inserting, 314-316 
locating, 299 
removing skins for, 321-322 
responding to, 316-319 
using conditional statements 
with, 317—318 


curves 
creating, 63-64 
editing, 65 

D 


damping effects, adding to physics 
simulation, 191 
Deco tool 
Decorated Brush, 61-62 
Flower Brush, 62-63 
Symmetry brush, 57-58 
Decorated Brush, using, 61-62 
deleting 
anchor points, 65 
bones, 161 
cue points, 316 
keyframes in Motion Editor, 137 
layers, 19 
sound files, 291 
destination keyframes. See also 
keyframes 
inserting, 217—220 
using frame labels on, 220—222 
device fonts, using with user-input 
text, 264 
Dialog Settings dialog box, 
displaying, 13 
documents. See Flash documents 
download performance, testing, 353 
drawing modes, 50 
Drawing tools, availability of, 32 
Dreamweaver, inserting Flash movies 
into, 362 
DSL setting, using with download 
performance, 353 


E 


eases 
presets, 140-143 
Random preset, 142 
representing direction of, 178 
setting for motion tweens, 
138-140 
using Strength option with, 178 
easing, controlling for armatures, 
177-179 
Edit Envelope dialog box, using with 
sounds, 287—288 
educators, resources for, 5 
embedded video, using, 326-328. See 
also Flash video 
encoding options. See video encoding 
options 
Essentials button, location of, 12 
event listeners 
adding to movie clips, 336 
creating for buttons, 214—217 
creating for text box, 267 
external content 
adding myLoader event listener 
to, 339 
loading, 334-337 
positioning, 338 
removing, 339 
using Code Snippets panel with, 
337 
external text. See also text 
embedding fonts, 270-271 
loading and displaying, 272-275 
naming text boxes for, 269-270 
saving content as text-only files, 
272 
external video, playing back, 305- 
310. See also video files 
Eyedropper tool, using, 67 


F 


F4V format, encoding video files to, 
298 
fade-in and fade-out effects, using, 
290 
files. See also published files 
opening, 10-11 
saving, 11 
fills 
changing, 49 
defined, 51 
modifying alpha values of, 66-67 
relationship to shapes, 44 
selecting, 46-47 


filters 
animating, 114-117 
applying via Motion Editor, 116 
blur, 93—94 
Clipboard button for, 95 
enabling and disabling for 
instances, 95 
establishing keyframes for, 116 
options for, 95 
Presets button for, 95 
Quality settings for, 94 
Flash 
displaying video in, 295 
finding resources for, 39 
installing on Mac OS, 3 
installing on Windows, 2 
starting, 10-11 
undoing steps in, 33-34 
Flash documents, testing, 350-351 
Flash Help, using, 39 
Flash Lite documents, choosing, 363 
Flash movies. See movies for Web 
Flash Player, detecting version of, 358 
Flash video. See also embedded 
video; video files 
converting video files to, 297-298 
embedding, 322 
embedding FLV on Timeline, 
324-325 
encoding FLV for embedding, 
323-324 
Flower Brush, using, 62-63 
FLV format 
embedding on Timeline, 322 
encoding for embedding video, 
323-324 
using with Flash video, 322 
FLV format, encoding video files to, 
298 
folders 
adding to Library, 80, 82 
creating for layers, 23-24 
fonts 
choosing, 30 
embedding for external text, 
270-271 
embedding in user-input text, 
264-265 
frame labels, using on destination 
keyframes, 220-222 
frames 
adding to animations, 110-111 
adding to Timeline, 286 
inserting, 19-20 
removing, 110 
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saving as images, 362, 364 
selecting, 20 
Free Transform tool 
using, 47—48 
using with path of motion, 
124-125 
FXG file format, exporting Flash 
artwork as, 75 


G 


gary gari thumbnail, selecting, 203 
GIF files, using, 81 
Global Transform option, caution 
about, 98 
gotoAndPlay() command, using, 
226, 228-229 
Gradient Transform tool, using, 53 
gradient transitions, creating, 51-53 
graphic symbols, using, 76 
graphics, adding for wrapped text, 
250-251 
green screen, using, 313 
groups, using with objects, 54-55, 
60-61 
guides 
locking, 90 
using with symbol instances, 
89-90 
gutter, modifying for text, 249 


H 


Help feature, consulting, 39 
hexadecimal numbers, choosing, 45 
History panel, undoing steps in, 
33-34 
Hit keyframe, using with button 
symbols, 201 
home button 
adding button instance, 223 
explained, 222 
using Code Snippets panel for, 
223-225 
HTML files, creation of, 35-37 
hyperlinking text, 259-261 


Illustrator 
copying and pasting artwork, 75 
FXG file format, 75 
importing layers, 75 
importing symbols, 75 
Illustrator files 
editing symbols in, 75 
importing, 73-74 


image files 
loading dynamically, 336 
saving frames as, 362, 364 
image formats, availability of, 81 
imported images, using, 16 
Ink Bottle tool, using, 49 
instances. See button instances; 
symbol instances 
interactive movies. See also movies 
creating button symbols for, 
197-201 
duplicating buttons for, 202 
naming button instances in, 
207-208 
overview, 196 
placing button instances in, 
205-206 
preparing Timeline for, 212-213 
swapping bitmaps for, 202-204 
testing button behavior in, 206 
interactive navigation 
adding stop action, 213 
event handlers for buttons, 
214-217 
inverse kinematics. See also physics 
simulation 
defining bones inside shapes, 
168-171 
editing bones and armature, 173 
editing shapes, 171-172 
explained, 153 
Spring feature, 185-186 
invisible buttons, overview of, 201. 
See also button symbols 


J 
jagged objects, smoothing, 29 
joint speed, changing, 167 
joints 
changing angle indicators on, 
163-164 
constraining rotation of, 161-164 
constraining translation of, 
164—168 
JPEG images 
importing to Library panel, 15 
using, 81 


K 


keyboard shortcuts 
Convert to Symbol command, 77 
Copy command, 48 
exporting SWF files, 351 
frames, 20 


INDEX 


Library panel, 14 

Paste command, 48 

Paste in Place command, 66 

previewing movies, 34, 351 

Properties inspector, 26 

removing frames, 110 

Rulers, 89 

symbols, 75 

keyframes. See also destination 
keyframes; property keyframes 

creating, 21—22 

deleting in Motion Editor, 137 

duplicating containing stop 
command, 230 

editing in Motion Editor, 137 

establishing for different shapes, 
180-181 

establishing for filters, 116 

identifying in Timeline, 21 

inserting for animations, 118 

inserting in layers, 21—22 

inserting in Motion Editor, 
136-137 

moving, 22—23 

moving in animations, 111 

removing, 23 

selecting visual elements on 
Stage, 231 


L 


labels, using on destination 
keyframes, 220-222 
layer folders, creating, 23-24 
layers 
adding, 17-19 
adding to layer folders, 25 
deleting, 19 
features of, 16-17 
identifying in workspace, 11 
importing from Illustrator, 75 
inserting keyframes into, 21—22 
organizing in Timeline, 23-25 
rearranging, 19 
renaming, 17 
using blending effects with, 
78-80 
lesson files 
copying, 3—4 
using, 4 
Library 
adding folders to, 80, 82 
duplicating symbols in, 84 
editing symbols from, 83-84 


Library panel 
accessing, 14 
adding items from, 16 
features of, 14 
importing items to, 15 
Line tool 
creating dashed lines with, 62 
using with patterns and symbols, 
56 
lines, dashing, 62 
linked text boxes 
adding content to, 255 
creating, 252-254 
finding Next link, 259 
finding Previous link, 259 
Loader object, using with external 
content, 334-337 
Lock Fill option, using with gradient 
transitions, 52 
Lowercase option, using with 
external text, 271 


M 


Mac OS, installing Flash on, 3 
main menu button, availability of, 
223 
mask layers, defining, 341-343 
masks 
creating, 343-346 
defining, 341-343 
Media Encoder. See Adobe Media 
Encoder 
Merge drawing mode, described, 50 
metadata, adding, 353-356 
mobile devices, publishing movies 
for, 363 
Motion Editor 
Alpha property, 135 
changing property values in, 135 
components of, 132 
deleting keyframes in, 137 
deleting properties in, 137-138 
editing keyframes in, 137 
features of, 118 
Graph Size icons, 134 
inserting keyframes in, 136-137 
resetting values in, 137-138 
setting display options for, 
133-134 
using to apply filters, 116 
using to create Color Effect, 113 
Viewable Frames icon, 134 
Motion Presets, using with 
animations, 123 


motion tweens. See also path of 
motion 
explained, 105 
lengthening and shortening, 
109-110 
setting eases of, 138-140 
movie clip symbols 
creating animations in, 231—232 
preventing looping in, 132 
using, 76, 79 
movie clips 
adding event listeners to, 336 
controlling, 340-341 
movies. See also interactive movies 
copying, 4 
previewing, 34—35, 147, 351 
publishing, 35-37 
publishing for mobile devices, 363 
saving, 37-38 
movies for Web. See also publishing 
alternatives 
changing display settings, 
358-361 
changing playback settings, 361 
controlling with ActionScript, 
361 
detecting version of Flash Player, 
358 
Dimensions options for, 358—361 
inserting into Dreamweaver, 362 
Scale options for, 358-361 
specifying Flash file settings, 
356-358 
myLoader event listener, using, 339 


N 


Navigation tools, availability of, 32 
nodes 
defined, 153 
isolating rotation of, 159-160 
Numerals option, using with external 
text, 271 


(0) 


Object drawing mode, described, 50 
objects 
in ActionScript 3.0, 210 
aligning, 58-59 
breaking apart, 60-61 
changing 3D position of, 97 
changing 3D rotation for, 95-96 
converting to shapes, 50 
grouping, 54-55, 60-61 
matching colors for, 67 
smoothing, 29 


Option, using with Free Transform 
tool, 47 

Oval tool, creating shapes with, 
45-46 

Over keyframe option, choosing, 
203-204 


P 


Paint Bucket tool, using, 49 
panel group, moving, 28 
panels 
displaying as icons, 28 
docking, 28 
expanding, 28 
grouping, 28 
opening, 28 
rearrangement in workspace, 12 
unlocking from right side of 
screen, 28 
_parent Target, using with 
hyperlinked text, 260 
Paste command, keyboard shortcut 
for, 48 
Paste in Place command, using, 66 
path of motion. See also motion 
tweens 
editing, 125-126 
moving for animations, 123-124 
using Free Transform tool with, 
124-125 
patterns, creating symbols for, 55-56 
Pen tool 
Anchor Point tools, 172 
using to create curves, 63—64 
Pencil tool, creating dashed lines 
with, 62 
perspective angle, explained, 98—100 
photos, rotating on Stage, 27 
Photoshop files 
editing after importing, 80 
importing, 78-80 
physics simulation. See also inverse 
kinematics 
adding damping effects, 191 
defining bones for armature, 
186-187 
inserting poses, 189-190 
refining armature spring values, 
190-191 
setting spring strength for bones, 
187-188 
PNG files, using, 81 
poses 
clearing, 161 
editing on Timeline, 159 
inserting, 157-159 


inserting for physics simulation, 
189-190 
moving, 159 
removing from layers, 159 
preview mode, looping movies in, 35 
Primitive drawing mode, described, 
50 
project file, explained, 106 
projectors 
creating, 364, 366 
and TLF text, 365 
projects, copying, 4 
Properties inspector 
choosing fonts in, 30 
choosing text color in, 30-31 
easing options in, 177-179 
identifying in workspace, 11 
opening, 26 
positioning objects on Stage, 
26-27, 29 
property keyframes, overview, 118. 
See also keyframes 
PSD files, using, 81 
Publish Settings dialog box, 
displaying, 354 
published files, renaming, 356. See 
also files 
publishing alternatives. See also 
movies for Web 
creating projectors, 364, 366 
saving frames as images, 362, 364 
Punctuation option, using with 
external text, 271 


R 

Rectangle tool, creating shapes with, 
45 

removeChi 1d() command, using 
with external content, 339 

Retouching tools, availability of, 32 

rulers, using with symbol instances, 
89-90 

runtime armatures, using, 176—177 


S 


saving 
files, 11 
movies, 37—38 
workspace, 12 
Selection tools 
availability of, 32 
identifying, 33 
using to edit curves, 65 
using with armatures, 173 
using with path of motion, 126 
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selections, making, 46-47 
_self Target, using with hyperlinked 
text, 260 
shape behavior, refining with Bind 
tool, 174-175 
shape contours, changing, 48—49 
shape hints 
adding, 183-185 
removing, 185 
shape tweens, morphing with, 
180-182 
shapes 
changing transparency of, 66-67 
converting objects to, 50 
creating with Oval tool, 45-46 
creating with Rectangle tool, 45 
duplicating on Stage, 48 
editing, 47-49 
editing with bones in, 171-172 
fill and stroke of, 44 
skins 
changing transparency of, 310 
removing for cue points, 321-322 
using with video files, 307 
Smoothing option, using with 
objects, 29 
Snap to Objects option, using with 
Oval tool, 46 
software updates, checking for, 40 
sound clips, finding, 284 
sound files 
deleting, 291 
importing, 282-283 
sound quality, setting, 291-293 
sound settings, overriding, 292 
sound sync, options for, 294 
SoundMixer.stopA11( command, 
using, 312 
sounds 
adding to buttons, 293-294 
changing, 291 
changing volume of, 289-290 
clipping ends of, 286-289 
playing on Timeline, 283-285 
stopping before starting videos, 
312 
using Edit Envelope dialog box 
with, 287—288 
Spring feature 
effects of, 189 
explained, 185-186 
spring strength, setting for bones, 
187-188 
spring values, refining for armatures, 
190-191 


INDEX 


Stage 
adding items to from Library 
panel, 16 
changing properties of, 13-14 
duplicating shapes on, 48 
features of, 13 
identifying in workspace, 11 
measuring X and Y values on, 27 
positioning objects on, 26-27, 29 
repositioning text on, 33 
rotating photos on, 27 
rotating text on, 33 
selecting visual elements on, 231 
setting color of, 13-14 
setting dimensions of, 13-14 
star shape, creating with Deco tool, 
57-58 
stop action, adding to interactive 
navigation, 213 
stop() command, using with 
animations, 230 
strokes 
changing, 49 
relationship to shapes, 44 
selecting, 46—47 
Subselection tools, using to edit 
curves, 65 
Swap Symbol dialog box, displaying, 
203 
SWF files 
changing quality of sounds in, 
291-293 
creation of, 35-37, 147 
exporting, 351 
SWZ file 
merging ActionScript library 
with, 238—240 
use with TLF Text, 237-238 
symbol instances 
breaking apart, 86 
changing brightness of, 91 
changing color effects of, 90-92 
changing transparency of, 92 
decreasing alpha value of, 90 
explained, 74 
repositioning, 87—90 
resetting rotation and position 
for, 97 
resizing, 87—90 
using guides with, 89-90 
using rulers with, 89-90 
symbols. See also button symbols 
button, 76 
creating, 77—78 
creating for patterns, 55-56 
duplicating in Library, 84 


editing from Library, 83-84 

editing in Illustrator, 75 

editing in place, 85-86 

graphic, 76 

importing from Illustrator, 75 

movie clip, 76, 79 

overview, 74, 76 

swapping for interactive movies, 

202-204 

types of, 76 

using filters with, 93-95 
Symmetry brush, using, 57-58 
system requirements 

for Mac OS, 3 

for Windows, 2 


T 


Test Movie mode 
accessing, 147 
preventing looping in, 147 
text. See also external text; user-input 
text 
adding multiple columns, 
246-249 
adding titles, 240-242 
Break Apart option, 240 
changing dimensions of, 242 
changing orientation of, 243 
hyperlinking, 259-261 
registration of, 242 
repositioning and rotating on 
Stage, 33 
setting width and height, 242 
vertical, 243-244 
text boxes 
adding content for wrapped text, 
255 
breaking and relinking, 257-259 
changing contents for user-input 
text, 266—268 
defining, 242 
deleting from wrapped text, 
256-257 
inserting in wrapped text, 
256-257 
linking for wrapped text, 252-254 
modifying, 249 
naming for external text, 269-270 
naming for user-input text, 266 
resizing, 249 
text color, choosing, 30 
Text tool 
using, 68 
using to add title to animation, 
30-31, 33 


text wrapping. See wrapping text 
Timeline 
adding frames to, 286 
adjusting width of frame cells 
in, 25 
changing appearance of, 25 
creating more time on, 19—20 
features of, 16-17 
identifying in workspace, 11 
layers in, 16 
location of, 16 
organizing layers in, 23—25 
playing sounds on, 283-285 
preparing for interactive 
navigation, 212-213 
titles 
adding, 240-242 
adding to animation, 30-31, 33 
TLF (Text Layout Format) Text 
overview, 237-238 
and projectors, 365 
using, 68 
TLF Text library, merging, 238—240 
Tools panel 
identifying in workspace, 11 
overview, 32 
selecting tools from, 29-31, 33 
Trace Bitmap command, using 
caution with, 81 
transformations 
animating, 119-122 
global versus local, 98 
transition animations, creating, 
226-228 
transparencies 
animating, 112-114 
creating, 66—67 
importing for video clips, 311 
Tween layers, explained, 105 
tween span 
lengthening for animations, 
109-110 
viewing, 118 
tween targets, swapping, 127-129 
tweens, Classic option for, 143 
Type tools, availability of, 32 


U 


Undo command, using, 33-34 
unload() command, using with 
external content, 339 

updates 
checking for, 40 
setting preferences for, 40 
Uppercase option, using with 
external text, 271 


URLRequest object, using with 
external content, 334-337 
user-input text. See also text 
adding display fields, 262-264 
adding static text elements, 
261-262 
changing contents of text boxes, 
266-268 
device fonts, 264 
embedding fonts, 264—265 
naming text boxes, 266 
testing calculator, 268 


V 


vanishing point, explained, 98—100 
variables, creating for text boxes, 267 
vector graphics, converting bitmaps 
to, 81 
vertical text, creating, 243-244 
video clips, importing for 
transparencies, 311-312 
video encoding options 
cropping, 299 
cue points, 299, 301 
displaying, 299 
export settings, 299 
presets, 299 
trimming, 299 
video files. See also external video; 
Flash video 
adding to Adobe Media Encoder, 
295-297 
changing status in queue, 298 
choosing controllers for, 310 
converting to Flash video, 
297-298 
cropping, 299-301 
displaying in Flash, 295 
encoding to F4V format, 298 
encoding to FLV format, 298 
Export Settings dialog box, 303 
final output size, 303 
obtaining original info about, 303 
Out points, 302-303 
In points, 302-303 
saving advanced options for, 
304-305 
setting advanced options for, 
303-304 
time markers for, 302 
using skins with, 307 
video length, adjusting, 302-303 
video playback, controlling, 309-310 
volume, changing for sounds, 
289-290 
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W 


Web movies. See movies for Web 
Web sites 
certifications, 6 
Help feature, 39 
program features, 4—6 
resources for educators, 5 
tutorials, 4-6 
Windows, installing Flash on, 2 
workspace 
choosing, 12 
layers in, 11 
Properties Inspector, 11 
saving, 12 
Stage, 11 
Timeline, 11 
Tools panel, 11 
wrapping text 
adding content to linked text 
boxes, 255 
adding graphics, 250 
breaking and relinking text boxes, 
257-259 
deleting text boxes, 256-257 
inserting text boxes, 256-257 
linking text boxes, 252-254 
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x axis, using in 3D space, 95, 145 
XFL documents 
modifying, 38 
opening, 38 
XFL format, saving files to, 37-38 
XMP Metadata dialog box, 
displaying, 355 
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y axis, using in 3D space, 95, 145-146 
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z axis, using in 3D space, 95, 144—146 


